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.

Fortunately, there are some helpful tools available for responsive design, including the most basic and essential ones: pencil and paper. Specifically, sketchsheets for responsive web design can be incredibly useful.

We have compiled a collection of printable wireframing templates that you might find helpful when sketching your designs. These templates will provide a starting point and help you create a visually appealing and responsive website.

Sneakpeekit Responsive Sketchsheets

If you’re a logo designer, font creator, or web designer, you’ll find that Sneakpeekit offers an excellent free solution for all your sketchsheet needs. Their platform provides a variety of mockup templates to assist you in designing responsive websites.

Additionally, they offer grids that align with some of the most widely used grid systems and frameworks, including Bootstrap.

Responsive Web Design Sketchsheets by Jeremy Palford

Jeremy Palford offers sketchsheets for various device sizes, allowing you to create responsive designs that look great on any screen.

Whether you are an experienced UI designer or starting out, these responsive web design sketchsheets will help you create polished and effective websites.

Responsive Sketchsheets by ZURB

This versatile set of free sketchsheets provides both responsive and regular sheets, giving you the flexibility to choose the format that works for your design needs. If you’re designing for mobile devices, you can download the responsive sketchsheets and get started right away. Alternatively, the regular sheets are a perfect fit if you’re designing for desktop devices.

Moreover, these sketchsheets are not limited to standard design layouts. You can also use them to design off-canvas content, making them a versatile tool for any web designer.

Responsive Sketch Pad

The Responsive Sketch Pad is invaluable for generating cross-platform application ideas and visualizing design prototypes across multiple devices. Whether designing for desktop, tablet, or mobile, this sketch pad can help you create designs that look great on any screen size.

With its support for multiple device sizes, you can create designs that are optimized for each platform, ensuring that your application looks and performs its best no matter where it’s used.

Paper & Pencil

Sometimes the simplest tools are the most effective. If you’re looking for a straightforward way to sketch responsive designs, all you need is an A4 sheet of paper and some pencils. This humble tool is probably sitting right next to your computer screen, waiting to be used.

With just a pen or pencil, you can create sketches that show how your design will adapt to different screen device orientations and sizes. And since A4 paper is a standard size, you can easily print and share your sketches with your team or clients.

While there are many more complex tools available for responsive sketching, sometimes going back to basics is the best way to approach a problem. So next time you need to sketch a responsive design, grab an A4 sheet of paper and get to work!

The post 5 Printable Templates for Sketching Responsive Layouts appeared first on Speckyboy Design Magazine.

At their worst, forms are clunky, hard to navigate, and detract from the overall feel of your page.

Helpful tips for creating intuitive and efficient website forms, and how they will help to drive business value?

Taking Cues from Google

Our favorite search engine has seen a lot of algorithm updates over the past few years, all in the name of making it easier for users to find what they’re looking for with ease.

Most recently, Google has attempted to make searching more like speaking to a friend. Users now expect to get what they’re looking for by using everyday language. This has spilled over to web design, and visitors expect a human factor in coding and machine learning.

This led to a rise in natural language user interfaces and natural language forms that aim to get user information in a more human and engaging way. Companies seek to reflect a user’s mental processes rather than the traditional (and stiff) presentation of traditional forms.

Customizable templates and pre-built plugins make this easier than ever. While intuitive forms take much of the grunt work out of form design, best practices still dictate how, when, and where users see forms on your website.

The Best Practices for Form Use

Where and how do we present forms in a way that are most useful to a user (and for your company)? Follow these guidelines:

1. Ask for Required Information Only & Follow a Logical Format

The best forms are not demands for information, but a conversation, as natural language processing illustrates. As with any logical conversation, it should follow communication between your user and your app (or website). Achieve this by:

• Asking questions in sequence, from a user’s perspective. This includes presenting information in a meaningful and logical way (as we would in a conversation). If there is no meaningful order, order options alphabetically.
• When creating a form, ask why you’re asking each question and what you plan to do with the information. This helps eliminate unnecessary questions and increases the likelihood of retaining user attention. Reducing user effort is the most important step in increasing your completion rates.

2. Use a Single-Column Format

Your form should contain the required information only, which should make it short enough to use a single-column format.

Horizontally adjacent fields require a user to scan in a “Z” shape, which slows comprehension and creates user attention lags. The best forms have a clear path to completion – straight down the page.

Credit Card Payment Form designed by Guadalupe Sahagun

3. Minimize Typing Effort

Make every effort to minimize the number of input fields and your user’s required typing effort, particularly on mobile.

Drop down menus, check boxes, and radio buttons not only minimize the amount of effort for your users, it also addresses the amount of errors inherent in typing, especially on mobile.

4. Field Size & Input Data

Take steps to ensure the field size is proportionate to the data you’re requesting. A recent study of eCommerce stores found that 79% of all users abandon their carts at checkout.

One of the reasons? Confusion about field size. The study showed that if a field was too long or too short for the amount of required information, users wondered if they were appropriately completing the form.

This was especially true for Card Verification Code fields. Be sure your information can fit comfortably within the given field – not too big, not too small.

Payment Checkout Form designed by Black Flag Creative

5. Format with Flexibility

Some forms require that data with different correct presentations. For example, a phone number can be 123-456-7890, or (123) 456-7890. Make your formatting accept any presentation of a phone number.

The same goes for birthdays and booking dates (which you could present as a drop-down menu calendar). The goal is to provide as many flexible options as possible for your user’s convenience.

Form Field designed by Lacey Ankenman

6. Optional Versus Required Fields

Ideally, every data input on your form will be required (since you’re only asking for necessary information). If you must include an optional input (an example it might be a building unit or apartment number in an address form), be sure to label it as such.

Red asterisks next to required information are common practice. If you are including optional fields, limit them to one or two.

8. Get Rid of Reset Errors

There used to be a convention for adding reset buttons to forms, but we advise against this practice. Imagine the frustration of completing a form, only to accidently hit reset and lose all your work!

Would you fill out the form again or just close the window? We thought so. Avoid this scenario by leaving the reset button off your form – it does more harm than good.

9. Entice Your Users to Fill Out a Form

One of the keys to getting your users to fill out a form is to make them want to do it. Here are some examples of how your website can entice users to fill out your form:

• Provide a list of user benefits for form completion. This may be a list of benefits, features, or ways you help your customers. It may even be a promo code for a future purchase upon completion.
• Build your brand’s credibility by providing social proof, for example, client testimonials or showcases around your form. This shows that people rely on you to provide an essential product or service. This also helps create a human connection to the brand – include pictures to drive it home.
• Tell users in explicit terms that you value their privacy and they won’t be getting any spam.

Multi Step Form designed by Michael But

10. Create a Compelling CTA

The importance of your call to action cannot be understated, as it’s the first step in the conversion process and will compel users to hit that sign-up button.

Let a user know what you do, why they need you, and what sets you apart – and do it quickly. It sounds like a tall order, but these tips will help:

• Put yourself into your customer’s shoes. Change one word in your CTA content: Take your “You” and turn it into “My.” A recent study found this simple switch increased conversion by 90 percent.
• Be bold. Use color, shapes, fonts, words, and placement that draw a user’s eye and capture their attention. Select a bold and contrasting color that clearly communicates an action to your visitor.
• Consider placing your CTA in the main navigation or footer, so it’s visible across your site.

An Intuitive Form Creates Business Value

HTML Forms that are easy to complete create increased time spent on your webpage and ultimately drive more customers to your product or service.

Draw your users to your form with a compelling CTA and make your form easy to navigate, with natural language. This will entice your users to complete your form, which will lead to more business in the future.

The post Ten Steps to Intuitive Forms in Web Design appeared first on Speckyboy Design Magazine.

These elements can enhance the user experience (UX). However, one size does not fit all. People consume the web in different ways. There are various screen sizes and connection speeds to consider. Thus, what produces smiles for one user may result in a headache for others.

That’s why it can be hard to duplicate desktop experiences on mobile devices. Some elements may translate perfectly. But others could be cumbersome. It’s here where designers must choose between refactoring or removing the feature.

Today, we’ll take a look at some desktop features that you should consider leaving out on mobile. Generally speaking, these items are likely to get in the way. And they may prevent users from getting the most out of your website.

Complex UI Animations

Animation can be a great tool for grabbing a user’s attention. CSS and JavaScript frameworks make adding movement easier than ever.

But some animations are a better fit for large screens than mobile devices. Consider complex page transition effects. Or UI layouts that include highly-synchronized sequences. On a desktop, they can add personality. Not so much on a phone.

Quickly accessing information is crucial for mobile users. For example, think of a person on the go who is looking for directions to a store. Making them wait while the store’s address cascades into place isn’t efficient – it’s an obstacle.

That’s not to say animation isn’t beneficial on small screens. It may be just the thing for onboarding new users. Context matters, however.

Before passing an animation from desktop to mobile, think about its purpose. How will it impact usability? If it’s purely decorative or could get in the way, you may want to skip it.

Full-Width Sliders and Videos

The use of sliders in modern web design is debatable. On the one hand, a full-width slideshow can still create a compelling visual experience. Yet it can also hog both screen real estate and system resources.

Those drawbacks are exacerbated on mobile devices. And the visual benefit could be nullified as well – especially if the presentation maintains a wide aspect ratio. The images appear smaller on the screen. But the same amount of code is loaded regardless.

With Google pushing its Core Web Vitals metrics, a slider makes achieving a high score that much harder. As such, it could be the difference in whether a website passes muster.

Usability is also a concern. A cropped presentation may make slides harder to read or interact with. You can make an effort to improve the mobile experience. Yet it still may not be enough to justify the performance hit.

Jettisoning a slider doesn’t mean settling for a boring UX, however. Replacing it with a traditional hero area could help maintain messaging without the excess bloat.

Clickable Elements That Require Precise Interaction

Interactive UI elements bring a level of polish to a design. Data visualization tools such as charts and infographics can help users grasp complex concepts. And even simplistic items like accordions and tabbed layouts make for a tidier desktop experience.

But the benefits aren’t always universal. In some instances, interacting with these elements is difficult for mobile users. Specifically, we’re talking about features that require a precise click or touch.

Imagine an interactive pie chart where clicking a “slice” reveals data. Desktop users have more screen real estate to play with. They are also likely to have a pointing device or keyboard to help them navigate.

On a phone, those elements may shrink to fit the smaller screen. And they require the user to touch the chart in precisely the right spot. There’s less margin for error. It may be possible for them to zoom in. But they may have to zoom out again to comfortably read the text.

There is a possible workaround. You could refactor the chart for mobile users. Instead of requiring a touch to access data, displaying a color-coded key would remove this barrier.

One Website, Multiple User Experiences

It’s easy to get caught in the trap of trying to replicate the desktop experience on mobile. It might be well-intentioned. However, there’s also the risk of making things harder for mobile users.

That’s where the concept of progressive enhancement comes in. By building the essential features first, we ensure everyone can access the information they need. From there, we can add those shiny bells and whistles for the devices that benefit from them.

Sometimes that means eschewing or altering a desktop feature for mobile users. Still, clients may not necessarily understand the reasoning behind this logic.

Thus, it’s worth pointing out that a user’s experience with a website will largely depend on their device. The goal isn’t to create a singular UX. Rather, it’s about creating a cohesive one that caters to users.

Hopefully, stakeholders will buy into this concept. Then you can work together towards a website that serves every user.

The post The Desktop Features You Should Consider Leaving Out on Mobile appeared first on Speckyboy Design Magazine.

These items ensure that users can access a website. But that’s only half of the battle. Our content also has to be easy to understand. Yet the subject seems to fly under the radar of web designers. Perhaps that’s because accessible content is more subjective. How do we know what passes muster?

There is no magic formula. But there are tried-and-true practices that will help you write accessible web content. And it’s something you can share with clients. With the help of an expert, we’ve put together some dos and don’ts. Let’s get started!

An Expert’s View of Accessible Web Content

Amber Hinds has seen all manner of accessibility mistakes. As founder and CEO of Equalize Digital, she and her team have a laser focus on the subject. That made her a natural choice for advice on the connection between content and accessibility.

We asked Amber about common accessibility issues. And she also provided some great tips for testing and talking to your clients about it.

What traits make content accessible to all users?

Content accessibility is less about things like focus states or HTML semantics and more about paying attention to the readability and structure of the content and being thoughtful about word choice. The most accessible content has a reading level below 9th grade and is clear and concise.

Adding headings throughout the content to break up long sections of text makes it more “skimmable” for all users. But it also enables people who are blind to jump to sections that interest them because screen readers allow people to use headings to navigate a page. Including HTML lists or data tables is another way to make content easier to consume.

Clarity of language and word choice also applies to link anchor text. You should be able to tell solely from the link text where the link is going. Just having meaningful links can go a long way in helping all people move quickly through your website and find the things they are looking for.

What are some common content accessibility mistakes you’ve seen?

When we audit websites, these are common mistakes that I see repeatedly:

• Headings not marked up as headings (people using bold paragraphs instead of an actual heading element) – usually, this is because they don’t like the styles their theme is applying to the headings.
• Headings were used out of order rather than in outline format (typically for the same reason as above – the H2 was too big, so they used H4s instead).
• Missing or incorrect alternative text on images.
• Meaningless links like “click here,” “visit the website,” or “read more.”
• Naked links that show the full URL without anchor text.
• Content that should be in a bulleted list, not formatted into a list.
• Videos missing transcripts and accurate captions.
• Videos that rely on sight to understand but without a written or audio description for people who are blind.

Are there any content types or formats we should avoid?

One thing I always ask people to rethink is PDFs. PDFs, whether menus for a restaurant or e-book lead magnets, are almost always in-accessible unless effort has been put in to make them accessible.

PDFs are designed for print – they’re not mobile responsive and particularly challenging for screen reader users. It is much easier for a screen reader user to access content on a web page than they can in a typical PDF. So, if you can put the content on a web page rather than in a PDF, that’s best for accessibility.

On web pages, more straightforward content layouts are better than “fancier” ways of displaying content, such as carousels, accordions, or tabs.

That’s not to say that you can’t have carousels, accordions, or tabs on an accessible website. But in WordPress, there are a lot of plugins that add this functionality where the plugin developer has failed to consider accessibility, and they are completely inoperable if you don’t have a mouse.

So if you do add these elements to your content, make sure to test them and ensure you can interact with them with only your keyboard.

Other content formats that can be troubling are video, animated GIFs, or audio that auto-plays, unless you have a pause button that allows users to stop it. Parallax and similar animations can cause nausea or dizziness, and rapid blinking can trigger seizures in people with photosensitive epilepsy.

Is there anything content writers can or should be doing to test for accessibility? For example, are there any helpful tools or guidelines?

Our plugin, Equalize Digital Accessibility Checker, scans websites for common accessibility problems and puts reports on the post-edit screen.

It functions much like an SEO plugin does – alerting about problems or areas of improvement so content writers can improve accessibility as they write before hitting publish. We have a free version of the plugin that scans unlimited posts and pages, and the pro version provides full site reports.

Outside of WordPress, there are some free browser extensions that are really handy for testing and can be used by people with any technical ability. WAVE is a popular testing tool that will show accessibility problems on any web page. This is comprehensive, like Accessibility Checker, it’s just built in the browser rather than in WordPress.

HeadingsMap is a Chrome and Firefox extension I really like that shows heading structure and alerts if headings are used in the incorrect order.

How should web designers approach this topic with clients?

We start discussing accessibility early in conversations with clients before even writing a proposal. Over the past few years, we have found that bringing it up early has helped us to stand out.

During the sales process, my partner Chris will ask prospective clients questions about where they operate and their funding. “Do you have offices in California or New York? What about Ontario? Europe? Do you get federal grants or funding?”

Then he follows up their answers with an explanation that he wants to have a well-rounded idea of what accessibility and privacy laws might apply to them.

Many clients may have started to think about privacy laws, but accessibility will be new to them, and so that opens the door for them to have conversations about accessibility laws in various areas. They will frequently follow up in a later conversation and tell Chris they were impressed that he is so thorough because no one else they spoke with even mentioned accessibility.

In many ways, this is really about positioning. It’s a way to show that you’re an expert who stays abreast of changes in the industry and is going to be on top of things so the client doesn’t have to worry about it.

From the perspective of selling clients on the investment, outside of discussing accessibility laws or lawsuits, we talk a lot about considering accessibility in how we design and build as being a major part of the overall user experience. Improving search engine optimization, performance, and conversions once people are on the site. Accessibility is a marker of quality.

Accessible Content Is a Win for Everyone

The great thing about accessible web content is that it benefits everyone. And you don’t need to sacrifice quality. When users can read and understand your content, your chances for success improve.

Keeping this in mind during the content creation process is critical. All content should go through multiple revisions. Clarity and simplicity should be the ultimate goals.

Our thanks to Amber Hinds for sharing her insights! You can connect with her on Twitter and Equalize Digital’s website.

The post What You Need To Know About Accessible Web Content appeared first on Speckyboy Design Magazine.

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.

And while there’s logic to that design principle, it overshadows a simpler and more inclusive principle: Design for all people, not most.

Optimize pages and content so that every possible user can enjoy and interact with your website and access the information and data available. Engaging in this practice will help develop a wider market and diversify your customer base. 15% of the world’s population has some level of disability.

These are people who, like everyone else, use the internet often and rely heavily on digital communication and tools. Optimizing your website to ensure users can enjoy a great experience can expand your web of interaction.

Through practicing inclusion in your design, you’ll be able to reach millions of people who are often overlooked.

Designing for accessibility doesn’t have to be hard. It just needs to be simple and considerate of all potential users. Here are some tips that will help you to to optimize your website for maximum accessibility.

The post Web Accessibility 101: Designing for All appeared first on Speckyboy Design Magazine.

This methodology can produce mixed results. In some cases, all of the fancy functionality and effects can be distracting. They take users away from the core functions of browsing and buying online. Indeed, sometimes you really can go a little too big.

What’s missing is a focus on the bare essentials. These are the features that shoppers need to easily get around your site and find what they’re looking for. If and when they do place an order, checking out and reviewing order status need to be dead simple.

So, let’s eschew all of the bloated features for a moment and turn our attention to the basics. Here are a few must-have features for your eCommerce website.

Product Filtering

Online stores come in all shapes and sizes. But it stands to reason that, the more products you sell, the harder it can be for visitors to sift through your offerings. The risk is that they’ll either expend a lot of effort to find what they need or, even worse, they won’t find it at all.

That’s why product filtering functionality is so crucial. It provides a logical path to narrow down products to those that fit a customer’s specific requirements.

Filtering can be implemented in a number of different ways. The most basic being the ability to view products by their assigned categories and tags. For shops that have a low-to-moderate number of products, this may be all you need – so long as you provide navigation for them.

Of course, it can be scaled all the way up to dedicated UIs where users select from a range of options. Details such as pricing, brand, color, size, etc. make finding the right match that much easier.

Related and Recently Viewed Products

Once a customer finds what they’re looking for, it doesn’t necessarily mean they’re ready to buy. They may want to do a little more research or simply come back another time.

Therefore, you’ll want to provide them with alternative options and a way to get back to where they were. Offering lists of related and recently viewed products will do the trick.

Related Products

Related products can be a great way for customers to learn about other items within the same category. For example, someone may want to compare several televisions before making a decision. It could even compel them to go for the more expensive option (everybody wants that big screen, right?).

It could also be utilized as an invitation to purchase accessories. With the aforementioned TV shopper, they might see the perfect stand or soundbar. There are any number of possibilities here.

Recently Viewed Products

When it comes to recently viewed products, this feature makes it easy for a shopper to pick up where they left off. At the very least, it saves them the trouble of having to search through your store again.

While this doesn’t have to be prominently displayed, it should be added to an area where shoppers will see it. That could be at the bottom of the page or maybe even within a sidebar. Either way, it’s a nice little convenience.

The Ability to Create an Account or Shop as a Guest

Every shopper that comes to your website has their own preferences regarding user accounts. Some want the convenience of having their own login, while others would rather keep things a bit more casual.

It’s important to meet customers where they’re most comfortable. Forcing a particular action – even with good intentions – will likely be a turnoff. With that, allowing them to easily create an account or shop as a guest provides them with choice.

User Accounts

User accounts are an attractive feature for both shoppers and store owners. Shoppers get the convenience of having a single place to manage orders, billing information and shipping addresses. Those that are frequent buyers will appreciate not having to re-enter this data every time they place an order.

For store owners, the account dashboard is a great place to offer customers extra perks or get in touch with them regarding an order. Package tracking numbers, for instance, can be added here – allowing customers to reference them anytime.

Account creation can be made available through various avenues. Placing a link in the navigation and via call-to-actions are advisable. Enabling registration during checkout is also an effective means of encouraging customers to sign up.

Guest Shopping

Unless your eCommerce store is members-only, it makes sense to allow customers to check out as guests. This enables them to shop without having to make a commitment.

Besides, this doesn’t mean you have to give up all hope. There’s still an opportunity to tout the advantages of registering for an account. Who knows? Some people may eventually take you up on the offer.

Master the Basic Features of eCommerce, Then Add On

In the design process, it’s easy to overlook the tried-and-true features of an eCommerce website. They tend to get lost in the pursuit of more flashy bells and whistles. Yet, it’s those basics that lay the foundation for a great user experience.

Much as designers tend to focus on a mobile-first philosophy, perhaps eCommerce should be approached with an eye towards basics-first. Once those are established, it’s time to think about adding a little bling to the mix.

This will ensure that a website is user-friendly and reinforces the primary goal of making conversions.

The post A Focus on the Basics: Must-Have Features for Your eCommerce Website appeared first on Speckyboy Design Magazine.

Quite often, we find what we’re looking for by studying other websites. And there’s certainly nothing wrong with that. Design communities such as Awwwards and Behance offer plenty of worthy examples. The very best of these websites is something we can learn from and aspire to.

But it can also be beneficial to explore other forms of design. Websites may be the most relevant, but they certainly aren’t the only creations that can inspire us.

Take classic video games, for example. Sure, they may not be much to look at in terms of graphics. Those pale by today’s standards.

But they do have something to say about usability and intuitive design. And those are lessons that web designers can take to heart.

Press Play for Hours of Fun

Some of my fondest childhood memories were made in the arcade. For a small-town kid, the arcade was a place to explore the world (along with a few outer galaxies).

By dropping my quarter into a game’s slot, I could be anything and everything. A pilot, racecar driver, athlete, or commando. The only limits were the number of coins in my mother’s purse (or those she was willing to part with, at least).

Much to the chagrin of dear old mom, I could turn just a few of those quarters into a whole lot of playing time. I can still recall her walking up to me in the middle of an intense game, tapping my shoulder and asking when I was going to be done.

My response? “Aw, can’t dinner wait? I’m winning!”

This brings a smile to my face – but also a thought. How was I able to make those coins last for so long? I wasn’t a particularly skilled player. For sure, there were other kids who stretched their minuscule allowances even further.

What was the secret to my hours-long gaming sessions? Maybe it had something to do with how those games were designed…

The Challenges of Arcade Game Design

One can imagine the challenges faced by game designers – especially in an era when technology wasn’t so advanced. Chief among them was creating a game that anyone can reasonably master within a few minutes.

This was vital in a fast-paced arcade environment. The machine not only had to grab a potential player’s attention, but it also had to quickly educate them in the quest to create a loyal customer.

Regardless of the game’s premise, there were a common set of usability concerns to think about:

• Instructions for play had to be minimal. They were either printed in tiny fonts directly on the machine or displayed on the screen. Either way, designers couldn’t expect players to spend a lot of time reading. Therefore, only the basics could be covered.
• Controller options were limited. In many cases, a couple of buttons and joysticks were the main instruments. Steering wheels, pedals, and trackballs were also possibilities. Designers had to work within these limitations without making things too complex.
• The game needed to guide players. Since there were no detailed instruction manuals or online resources, the game had to lead users in the right direction. This was often done through the demo mode that was displayed before players inserted a coin. It helped attract people to the game and show them how it was played. In-game helpers like arrows or other visual cues also played a role.

These could be monumental challenges for game designers. But the most enduring games seem to be the ones that got it right.

One shining example is the longtime favorite PAC-MAN. There’s no big secret as to why it has endeared itself to gamers for over 40 years.

By watching the game’s demo mode, a player could gain a clear understanding of what it was all about. The dead-simple joystick control required very little physical skill.

Within a couple of minutes, you could find your way around the maze, elude a few ghosts, and conquer that first level. Even as subsequent levels became harder, it always left you wanting more.

That sounds a little bit like what web designers strive to accomplish, no?

What Do Websites and Video Games Have in Common?

Perhaps websites and old-school video games are a few lightyears apart in terms of technology. But many of their end goals are strikingly similar.

In both cases, designers have very little time to make a first impression. If a website doesn’t provide users with an immediate path forward, it’s likely “game over.”

Games drew attention with flashing screens and loud noises. That was necessary for a busy, competitive environment. Websites have to be a bit more subtle. But the desired result is the same – to entice users to stick around and keep coming back.

And, just as with classic games, a simple UI tends to work better on the web. A website that is too hard to navigate or fails to meet accessibility standards will not become a fan favorite.

The worst games tended to be the most overwhelming to play. The same can be said for poorly designed websites. No one wants to waste their time and money on something that isn’t enjoyable to use.

Then there’s the challenge of educating users on completing specific tasks. In the world of web design, visual cues like onboarding UIs and microinteractions are the name of the game.

Learn from the Classics

Back when I first became a web user, I experienced feelings of awe and wonder. Never being one to pick up on the obvious, it took me a few years to realize when and where I’d felt that way before.

Just as the arcade could easily transport me into a scene from Star Wars, the web took me to all kinds of places I’d never been. Once again, it felt like the universe was at my fingertips.

And now, in the same spirit of game designers from back in the day, being a web designer means guiding users. It’s about building an interface that takes people where they want to go.

The details of the mission may be different. But the goal is still to get users on to that next level.

The post Want UX Inspiration? Look To Classic Video Games 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.