User Experience Design (UX) Resources https://speckyboy.com/category/ux/ Resources & Inspiration for Creatives Wed, 05 Feb 2025 08:45:05 +0000 en-US hourly 1 https://speckyboy.com/wp-content/uploads/2024/03/cropped-sdm-favicon-32x32.png User Experience Design (UX) Resources https://speckyboy.com/category/ux/ 32 32 Creativity Hasn’t Left Web Design – It’s Just Different https://speckyboy.com/creativity-web-design-different/ Wed, 20 Nov 2024 15:58:41 +0000 https://speckyboy.com/?p=166967 It sometimes feels like web design has lost its creative flair. Has it? Or have we changed how we use our creativity?

The post Creativity Hasn’t Left Web Design – It’s Just Different appeared first on Speckyboy Design Magazine.

]]>
Creativity can be freeing for web designers. There’s nothing quite like reaching that “a-ha” moment. It’s when an idea transfers from your head to a screen.

I had that feeling a lot during my early days in this industry. My work wasn’t great, mind you. But I felt the thrill of doing things I’d never done. And it was even better if I had made a client happy.

There was a lot of creative energy back then. The web was a new medium – and we were building it as we went along.

It’s no secret that the industry has changed dramatically. The old methods of building websites are gone. Now, we work with advanced tools and premade elements.

I sometimes feel like web design has lost its creative flair. Has it? Or have we changed how we use our creativity?

Let’s explore what it means to be creative in modern web design.

We No Longer Build from Scratch

An original web design isn’t always a top priority these days. We often prioritize efficiency, usability, and accessibility in our builds.

To that end, we start projects with frameworks and themes that provide a head start. Tools like Tailwind CSS feature readymade layouts and components. WordPress themes may offer a complete website for us to customize. And we can’t forget about the advent of block patterns.

That’s the reverse of how things used to work. We used to fire up Photoshop or some other design tool. We’d start with a blank canvas and build from scratch.

It’s easy to romanticize that era. We may think of web design as a lost art. It’s as if we were craftspeople who built sites the right way. None of these modern tools could match those techniques.

But that practice isn’t sustainable for busy designers. There’s not enough time or budget for a long design process. Not when there are multiple projects to complete.

For better or worse, our workflows have changed. Web designers have had to adapt to keep pace.

The web design industry has moved past starting from scratch.

Adding a Personal Touch to Predesigned Components

How can we be creative when using predesigned components? Complete originality may be out of the question. However, there’s still an opportunity to add a personal touch.

There is no shortage of areas to change. An element’s color, size, and typography are prime examples. We don’t have to settle for the default look.

We can also choose components that include minimal styling. The WordPress block editor works this way. A default implementation is typically barebones. Tailwind CSS also prioritizes utility over looks.

Knowledge of these tools also helps. We can design in Figma with specific components in mind. That allows us to use our imagination while staying within the lines.

The process is reminiscent of a collage artist. It’s about pulling all of these different pieces together. From there, we seek to create a seamless user experience. The results can be compelling.

The added layer of convenience might make us feel guilty, though. For instance, page builder tools take the pain out of design. It’s more paint-by-numbers than drawing from memory.

Did we even “create” anything here?

It's still possible to add a personal touch when using website themes and frameworks.

Modern Web Design Is a Different Artform

Sure, the design process has changed. That doesn’t mean we’re no longer being creative, though.

We’re still using our creativity – just in a different way. We’re using our knowledge and experience to build the best website possible. And we’re using our keen eye to make it beautiful and functional.

If anything, we’re fortunate to have these new tools and frameworks. Websites are becoming more complex all the time.

Perhaps that makes web design harder than ever. Designing from scratch and managing functionality might be too much to handle.

Our focus needs to be in many places at once. So, maybe we’re creating a collage while juggling!

Web designers have found new ways to use their creativity.

Find New Ways to Be Creative

One positive development is that designers don’t have to reinvent the wheel. We spend less time on the basics. That allows us time to concentrate on the details.

It’s the little things that can make a website stand out. We now have the tools to give us a head start.

Yes, these new methods can be limiting at times. However, web designers have plenty of experience in that area.

There have always been parameters for us to work within. It used to be the limits of CSS or user devices. Now, we try to bend and shape tools to match our needs. That also takes creativity.

You know what? Despite my initial concerns, those “a-ha” moments still exist. The change is in how we create them.

The post Creativity Hasn’t Left Web Design – It’s Just Different appeared first on Speckyboy Design Magazine.

]]>
Proven Tactics to Avoiding Shopping Cart Abandonment https://speckyboy.com/proven-tactics-avoiding-shopping-cart-abandonment/ https://speckyboy.com/proven-tactics-avoiding-shopping-cart-abandonment/#comments Sat, 02 Nov 2024 09:28:38 +0000 https://speckyboy.com/?p=87189 These simple yet highly effective tactics can help you avoid shopping cart abandonment on your eCommerce store.

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

]]>
You may not realize it, but you probably do it all the time when you’re shopping, especially online. In a brick-and-mortar store, you are less likely to leave without buying what you came for because you went through considerable trouble to go there in the first place.

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,

Shopping Cart Abandonment

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.

Open Neon Store eCommerce store

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.

buy sell cards store ecommerce

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.

shopping online payment options credit cards

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.

]]>
https://speckyboy.com/proven-tactics-avoiding-shopping-cart-abandonment/feed/ 2
What You Need To Know About Accessible Web Content https://speckyboy.com/accessible-web-content/ https://speckyboy.com/accessible-web-content/#respond Sat, 26 Oct 2024 06:01:18 +0000 https://speckyboy.com/?p=151251 Discover how to make web content accessible to everyone, enhancing user experience and inclusivity.

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

]]>
The term “accessibility” brings a few related concepts to mind. Design-related features like color contrast and legibility are prime examples. And we can’t forget about adding ALT attributes to images.

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.

Photo of Amber Hinds

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.

]]>
https://speckyboy.com/accessible-web-content/feed/ 0
Can the Visually Impaired Access Your Site? https://speckyboy.com/can-the-visually-impaired-access-your-site/ https://speckyboy.com/can-the-visually-impaired-access-your-site/#comments Wed, 23 Oct 2024 22:33:04 +0000 http://speckyboy.com/?p=11294 It's important to take all potential website visitors into consideration. This includes the visually impaired.

The post Can the Visually Impaired Access Your Site? appeared first on Speckyboy Design Magazine.

]]>
When designing a website, it’s important to take all potential visitors into consideration. This includes the visually impaired – those afflicted with color blindness, low vision and even total blindness.

While only U.S. government websites are required to be compliant with Section 508 of the Rehabilitation Act, many large American retailers are beginning to follow suit – especially after Target was sued for six million dollars (USD) for having an inaccessible site for the visually impaired.

The first thing to think about when improving the accessibility of your site for the visually impaired is the level of the impairment. Is your site suitable for users with color blindness, low vision, partial blindness or even total blindness?

Fortunately, there are several online tools and applications available that can help make your site more accessible.

Color Blindness

Studies suggest that about 8% of men and 1% of women have some type of color blindness, with red-green color blindness usually being the case. It goes without saying then that using red and green as the primary color combination can cause accessibility issues for color blind users.

However, there are other things you can do to improve the user experience for them. So before you begin desaturating your site (removing color), first save the current work of your site and try the following:

Ensure Proper Color Contrast – Some designers think that improving the color contrast of a site means that they are limited to a black and white color scheme. It doesn’t. It simply means that the colors you’re using should be passed through a color analyzer and measured for brightness difference, color difference and contrast ration.

Don’t Rely on Just Color Coding – Designers are married to the practice of using colors to identify elements of a site, such as buttons, menus, links and text. Try including icons or underlining text to distinguish various elements of your site.

Recommended Tools:

  • Checking Color Contrast – This tool will tell you whether the foreground color and background color combinations are compliant with Section 508, and WCAG AA and WCAG AAA standards.
  • Color Blindness Webpage Simulator – Enter the url of a site into this tool to see how that page looks to a person with color blindness.

Low Vision

Choosing a font style and size to ensure legibility is probably the most important factor in the design process.

There are several useful screen magnifiers and accessibility tools such as a disability simulation application.

But there are still a few more steps you could implement to your site to improve accessibility for low vision users.

Avoid or Limit the Addition of Low-Resolution Images and Images with Text – Low-resolution images are often used to improve load up times of a site, which is fine, but sometimes images can be extremely distorted and blurry if their dimensions are expanded too much. The text on images can also be hard to view for people using screen magnifier tools.

Do Not Use Scrolling, Flashing or Animated Text – Imagine trying to read something that’s scrolling from left to right really fast, blinking off and on or undergoing a metamorphosis. This can be quite a lot to keep up with, right? Now imagine reading that text when you’re visually impaired.

Front-Load Your Content – Front-loading is not a specific direction or term for web developers. It is a way of describing a writing method that puts the most important information or points first.

This writing practice can help a reader easily scan the content on your site and decide if they want to continue reading, which of course you want them to do. Also, front-loaded content on your site can be more easily managed by someone using a screen magnifier.

Clearly Separate Sections of Your Design – Breaking your content into sections that are easily scanned and showing the difference between body content and sidebar content is also important.

The use of proper heading tags makes it easier for all site users to read your page content. It also simplifies navigation for site visitors who are using screen readers.

Also add borders, background colors, headings, content, links, spacing, icons, etc. and larger text where you can. Use fewer graphics and provide alt text for images and tables you do use.

Use Fonts That Are Easy to Read – Fonts like Verdana, Arial, Helvetica, and Tahoma are very legible and still considerably stylish.

Partial & Total Blindness

Much of the design process you would use for low vision users applies for partially blind users as well. However, there are a few more components of the design process to consider for those that are totally blind.

Validate Your HTML Coding – This will help mitigate the chance of web browsers and screen readers misreading your site’s content.

Add Title Tags & Alt Tags – These meta tags will help screen readers distinguish the topics of each page and the images that are on them.

Use Fewer Graphics – Using fewer graphics helps with load up times so this component helps all users, not just users with visual impairments.

The post Can the Visually Impaired Access Your Site? appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/can-the-visually-impaired-access-your-site/feed/ 1
The Challenges Web Designers Face in Ensuring Website Accessibility https://speckyboy.com/web-design-challenges-accessibility/ https://speckyboy.com/web-design-challenges-accessibility/#comments Fri, 18 Oct 2024 19:18:31 +0000 https://speckyboy.com/?p=91591 Addressing web design challenges related to accessibility, ensuring your site is usable for all visitors.

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

]]>
Over the past several years, accessibility has become one of most-discussed topics in web design. And that’s a good thing. As more of our daily lives are moved online, making sure that content and services are available to as wide an audience as possible is crucial. The obligation to do so is both moral and, in some cases, legal.

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/

The WAVE Tool in action.

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

Ensuring a proper Contrast Ratio will help make text easier to read.

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.

NVDA Screen Reader Software

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.

There are tools available to help emulate color blindness and other visual impairments.

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.

]]>
https://speckyboy.com/web-design-challenges-accessibility/feed/ 3
The UX Design Checklist https://speckyboy.com/ux-design-checklist/ https://speckyboy.com/ux-design-checklist/#respond Fri, 18 Oct 2024 17:27:19 +0000 https://speckyboy.com/?p=74703 A comprehensive checklist covering the key elements and considerations for creating exceptional user experiences.

The post The UX Design Checklist appeared first on Speckyboy Design Magazine.

]]>
During the design process, some flaws in your product will go unnoticed. Those little (or sometimes big) things can do a lot to hurt the experience that the user has while using your software.

We put together a list of points for you to check before the design is signed off. Please note that not all of these points apply to all products, but generally, these are the most relevant ones.

Interaction Design

1. Repetitive actions or frequent activities feel effortless

Why it matters: Repetitive actions for the same output (for example, filling different forms with the same information) is a strenuous task that doesn’t help the user achieve their goals faster or better. The user is likely also to try to find a way around it: for example, looking for competitors who can help them to do it faster/better.

How to test it: You should start by analyzing all of your product’s flows and observing the user’s behavior. You want to make sure that, if repetitive actions are present, there is a way of facilitating them: an option to use previously entered information.

2. Users can easily recover from errors

Why it matters: Oftentimes, users perform unintended actions or actions that didn’t lead to desired results – and allowing them to go back and try again means they won’t be frustrated and will recover easily and keep moving on the flow.

How to test it: First, make sure that your navigation system allows for going back, and that actions can be undone. Then, when conducting usability testing, create scenarios where the user will most likely perform the wrong action and check if s/he can easily recover.

Users can easily recover from errors

3. Users are adequately supported according to their level of expertise

Why it matters: It’s important to make sure that novice users in your product have a smooth learning experience. However, once they are already familiar with the product, that should give place to tools that help them move faster through the flows. Both scenarios improve usability and retention. For example, shortcuts for expert users, tooltips for novice users, etc.

How to test it: First, check if you have tools for both audiences. Then, conduct usability tests with novice and expert users to see if these tools are being used properly.

4. Accessing help does not impede user progress

Why it matters: Users ask for help whenever they are stuck in a certain part of your product. It is important for help – online or offline – to be additional and allow the user to resume work where they left off.

How to test it: Create test scenarios where users will ask for help and see whether their workflows and progress are interrupted.

Visual Design

5. No more than three primary colors

Why it matters: This isn’t a fixed rule – and sometimes, for specific cases, more than three primary colors can be used. However, keep in mind that combining three colors is already difficult, so for most cases, more than that should be avoided.

How to test it: Make sure that the color palette you used when designing the product has no more than three primary colors.

6. Color alone is not used to convey hierarchy, content or functionality

Why it matters: Having a product that is accessible is not a plus – it’s a must. People with visual disabilities, such as color blindness rely solely on color to convey hierarchy, content, or functionality. This means they will not be able to use your product and will be an excluded demographic.

How to test it: colorfilter.wickline.org will let you put a color filter on top of your webpage and test it for different kinds of color blindnesses. You can also screen-capture your product and convert that to grayscale on an image editor and see if you can tell colors apart easily.

7. Visual hierarchy directs the user to the required action

Why it matters: Users rely on the product’s hierarchy and clues to know what to do and where to go – it is essential to understand this and properly guide them using that hierarchy.

How to test it: Understand how the flows inside your product work and whether its key actions are being incentivized by visual hierarchy.

8. Items on top of the visual hierarchy are the most important

Why it matters: Visual hierarchy allows users to quickly scan information, prioritizing content based on their immediate needs. Items near the top of the visual hierarchy must be most important to the business and most relevant for users.

How to test it: Screen-capture your digital product, then Gaussian blurring that screenshot to a radius of around 5px. When looking at the result, you’ll instantly visualize the hierarchy and notice which elements stand out. Are those the most important for the business and user?

Research

9. Primary action is visually distinct from secondary actions

Why it matters: Having distinct primary and secondary actions means the user won’t be confused when interacting with your product and will be less prone to making mistakes. For example, “Submit” and “Cancel” must be clearly distinct.

How to test it: When conducting usability testing, observe for common errors that result not from the user’s intent but from poorly distinct primary and secondary actions. Also, when reviewing the design, make sure that color, size, positioning, and other elements differentiate the actions.

10. Interactive elements are not abstracted

Why it matters: When using a new product, users come with a set of expectations built from previous experience using other digital products – for example, what buttons should look like and how they should work. Fulfilling those expectations means you aren’t creating unnecessary friction.

How to test it: First, review your product looking for areas where common patterns are not used. For example, links that don’t look like links.

11. Form submission is confirmed in a visually distinct manner

Why it matters: It is essential to give the user confirmation of whether an action was successfully performed or not. For example, after submitting a form, a clear confirmation message in the form of a color banner will mean that the user can move on to the next task.

How to test it: Check all areas of your product where the user inputs information. After user input is complete, trigger a confirmation regarding whether that action was successful or not. Make sure the feedback is crystal clear regarding the end status.

12. Alert messages are consistent

What it is: Alert messages have the same visual style and appear in the same location in the same manner.

Why it matters: Having consistent alert messages means the user will always understand what immediately deserves attention. Not being consistent with the alerts would mean extra mental load every time a new alert pops up.

How to test it: Ensure alert messages have the same visual style and their positioning is similar or identical.

13. Alert messages are visually distinct

Why it matters: By making sure that alert messages are clearly differentiated from other screen elements, the user can actually notice and/or act on them.

How to test it: After checking for visual differentiation yourself, see how users react to the alert messages in usability testing.

Information Architecture

14. Navigation is consistent

Why it matters: The way users orient and then navigate through your product directly influences whether they can complete their goals regardless of their current page.

How to test it: Check your information architecture documentation and make sure that navigation is reachable on every page and that it doesn’t change or disappear. Before diving into visual design, try card sorting or tree testing to ensure your information architecture pathways are as intuitive as possible.

15. Room for growth

Why it matters: You can’t redesign a product’s navigation and information system every time new features or content arises. Navigation menus and the overall layout needs to support more categories/topics without breaking. Designing with room for growth means that major design and development efforts scale easily across the interface.

How to test it: Ask all stakeholders about how content might grow over time in the product. Will you support more static content? Will the architecture need to support videos?

Typography

16. No more than two distinct type families are used

Why it matters: This isn’t a fixed rule. Sometimes it’s possible to pull off more than two. But generally speaking, matching more than two is not an easy job. For usability and visual purposes, sticking to two simplifies your typographic hierarchy, which improves comprehension.

How to test it: Make sure that your design isn’t mixing more than two type families. It would help if you also made sure that the families you chose are properly matched (learn more here).

17. Fonts used for text content are at least 12px in size

Why it matters: Again, it’s not a fixed rule – you could, in theory, use smaller sizes for particular purposes – but generally speaking, readability is severely reduced for sizes below 12 pixels.

How to test it: Check all your content and make sure that the fonts used for them are sized at at least 12 pixels.

18. Reserve uppercase words for labels, headers, or acronyms

Why it matters: Limiting the use of uppercase words is known to facilitate understanding – it is less visually heavy and easier for the user to digest. It should be used specifically for emphasis or very restricted cases – acronyms, for example.

How to test it: Run a thorough content check and make sure that uppercase words are limited to either only headers, labels, or acronyms.

19. Different font styles or families are used to separate content from controls

Why it matters: There need to be clear indicators as to what is content and what are controls – that is, what the user can interact with. Those indicators can be size, color, positioning, font, etc. The font is an important one: using different styles or families means that the user won’t be confused and will easily identify what can be interacted with.

How to test it: Identify all controls in your product and make sure that they are standing out from the content. When running usability tests, pay attention to whether users are having difficulties interacting with controls.

20. Font size/weight differentiates between content types

Why it matters: It heavily impacts readability and comprehension. Making a clear distinction between headings, subheadings, and paragraphs reduces the mental overload in digesting that content. It also has got visual benefits – it looks and feels better.

How to test it: When reviewing the content inside your product, make sure that headings, subheadings, and paragraphs are using different font sizes and weights.

User Interface

21. Proximity and alignment

Why it matters: The user has a tendency to group – functionally or contextually – items that are close to each other. A navigation bar is a good example of this. Following this pattern and grouping items that are connected means the user instantly understands your interface.

How to test it: Look for items that are similar in functionality and check if (when possible) they are grouped together.

22. Progress indicator for multi-step workflows

Why it matters: Especially for multi-step workflows, the user can easily feel overwhelmed or wonder how long until it is finally done. A progress indicator helps them to locate his/herself, but more importantly, it creates a sense of accomplishment and reduces drop rates.

How to test it: Check all the flows inside your product where there are different steps to accomplish something, then make sure that progress is being indicated through an indicator.

23. Foreground elements (like content and controls) are easily distinguished from the background

Why it matters: Important for people with visual disabilities. It also improves a user’s learning curve and comprehension. Clear distinction facilitates navigation, brings more attention to buttons, and increases usability in general.

How to test it: Screen-capture your product and Gaussian blur that screenshot to a Radius of around 3px to 5px. When looking at the result, can you easily tell what’s in the foreground and what’s in the background?


Congratulations on going through the list! However, this is not the end.

Your product is now more solid, and you might have improved in several areas – maybe it is more accessible now, for example – but remember always to keep testing, gathering user feedback, and keep on iterating.

The post The UX Design Checklist appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/ux-design-checklist/feed/ 0
The Complexity of Simplicity in Web Design https://speckyboy.com/complexity-simplicity-web-design/ https://speckyboy.com/complexity-simplicity-web-design/#respond Fri, 18 Oct 2024 08:08:03 +0000 https://speckyboy.com/?p=91567 Dive into the balance between complexity and simplicity in web design for optimal user engagement.

The post The Complexity of Simplicity in Web Design appeared first on Speckyboy Design Magazine.

]]>
The experience of a simple and brilliant web design is seamless. Users easily move from one piece of content to the next with confidence and comfort.

While the result is so recognizable, achieving a simple and complete user experience in web design is one of the toughest tasks faced by designers and developers.

The overabundance of things, ideas, and content over the past several years has led to a movement toward simplicity and minimalism.

Legal jargon is being traded-in for lay terms. Writers now strive to deliver concise concepts rather than flowery prose. Homeowners trade in their roomy ranches for tiny, efficient houses. Even chefs may reduce their menu offerings to pure and simple flavor profiles.

People are overexposed to so much stuff today that the concept of simplicity stands out as elegant, refined, and enviable.

In web design, too, the concept of simplicity is enjoying a resurgence. People spend more time interacting with devices and online, so they increasingly crave an experience that is psychologically comfortable (intuitive) and visually calming or straightforward.

Simplicity has never been so popular or so difficult to attain as it is today.

Defining Simple Web Design

Think about a ballet dancer, a racecar driver, or a sushi chef. When you sit to watch a professional performance, everything appears fluid, understandable, and simple.

If you were to try to re-create Swan Lake, the Indy 500, or your favorite hand roll, you would quickly see just how much work goes into the final product. Simple, user-friendly, and elegant web design is the same as any other professional performance.

A finished product that easily moves a user through the customer journey creates an internal feeling of user confidence, and driving conversions requires hours of research, professional collaboration, and optimization.

Are three CTAs on a page too many? Will an additional picture add to or distract from the purpose of the page? How will the color scheme make the average user feel when they arrive? These questions and dozens more drive the creation of a perfectly simple website.

Simple web design relies heavily on psychological understanding. Designers and developers who understand a user’s motivations, digital competence, and thought processes can create a web design that feels familiar, easy to use, and action-inspiring.

simplicity web design prepd pack homepage
Prepd

Elements of Simple Web Design

Simple web design isn’t boring, bare-bones, or unattractive. They take the best parts of a website and condense them into the most powerful and streamlined format possible.

Whether creating an eCommerce site or an informational blog, design simplicity represents thoroughness, beauty, and understanding.

Some of the most important design considerations used to develop simplicity include:

Customer Journey Simplification

Every website exists to elicit some response or action from readers. Understanding the customer/site visitor journey serves as the basis for every web design element.

The first goal of website creation is to minimize or simplify the path from awareness to conversion as much as possible.

Back-end Optimization

What appears in the user interface matters, but what happens behind the scenes affects every aspect of the user experience.

Well-executed coding impacts SEO, loading speeds, site navigation and usability, and the accuracy of any real-time update/analytics software plug-ins.

Structural Development

The navigational hierarchy and layout of each page will contribute to a site visitor’s first impressions.

Grid, full-page navigation, minimalistic, split-screen, and other layout configurations can all contribute to a simple web design. The key to a simple design is marrying the right layout with the right navigation styles, fonts, content, and interactions.

A Note on Minimalism & Simplicity

Some people misguidedly equate simplicity with minimalism. In reality, minimalism is always simple, but simple web design is only sometimes minimalistic.

Minimalism encourages designers to choose a few design elements to emphasize. The movement values contrast and whitespace in an extreme way.

Simple web design, on the other hand, only refers to a website’s ability to create a streamlined, comfortable, and attractive user experience. A graphic-heavy website, such as Pinterest, is simple but not minimalistic.

simplicity web design 3kvc homepage
3kvc.com

Attention to Detail

The portion of a photo used in the design, the texture of an icon, and the contrast of font sizes among titles, headings, and copy all affect the finished product.

For a website to achieve a successful and simple design, designers must consider how each decision factors into the usability and user experience of the finished product.

An Understanding of Mainstream Practices

Websites should not feel like carbon copies of competitor sites, but industry best practices create a valuable level of consistency every designer should consider.

Commonly used navigational menus, copy fonts, and site structures contribute to a level of user comfort and understanding from site to site.

Branding Consistency

Some designers work hard to perfect a website’s homepage and neglect to use the same level of care on subsequent pages. While the homepage deserves a fair amount of work, the design theme, brand, and layout should look and feel complementary to the homepage.

Leaving even one outdated logo on an old blog page, choosing the wrong color scheme, and failing to use consistent font types and sizes throughout the site can create a confusing site experience.

Interface Recall

A simple web design is memorable. After one visit, a site visitor should remember the site’s form and function on subsequent visits.

Interface recall is particularly important for sites that offer booking services, such as travel agencies, delivery services, and professional services.


Ultimately, simple websites offer familiarity and intuitiveness. They create a knowable platform brands can use to engage with site visitors and add increasing levels of creativity and innovation. Any brand can create a simple and effective website with these elements in place.

simplicity web design waaark homepage
waaark

Factors That Can Complicate the Search for Website Simplicity

Many design elements lend themselves well to simple web design. When designers start to combine elements in new, startling, or unintuitive ways, users may not have the same feeling toward the design.

Web designers and developers trying to make their mark in the world can complicate or oversimplify a website’s form and function. Some of the most common mistakes designers make when trying to achieve simplicity include:

Taking Minimalism to the Extreme

A minimalistic design should appear striking and memorable – not boring or oversimplified. Balance is the key to achieving both minimalism and simplicity in web design.

Ultra-minimalism takes things very close to the edge, but doesn’t quite cross over.

Forgetting the basics

While graphics, site layout, and structure contribute to a first impression, basic information availability can make or break the design.

Strategic calls-to-action, complete contact information, and valuable instructions directly support the customer journey. A designer forgets these elements at the site’s peril.

Auto-Play Visuals

Eliminating control over content is the wrong kind of design simplification. Any automatically occurring and intrusive visual can detract from the user experience.

Either keep visuals to a minimum or give users more control over the videos, displays, and other interactive content displayed.

Too Much Information Consolidation

While simple web pages are easily digestible, they can also create navigation hurdles for the user.

If the topic or discussion warrants a longer block of text or requires several images, focus on accessibility over simplicity. Avoid making users flip through slideshows or click to new landing pages for every subheading.

Website simplification is more about creating a straight line from point A (awareness) to point B (conversion) and less about making point A look nice.

Typographical Errors

The evergreen content on a site should not contain any errors. Simplicity does not mean basic and thrown together at the last minute.

An obvious error will distract users from the main purpose of a site and could undo all of the hard work a designer spends on graphics optimization and layout configuration.

Conclusion

Recognizing elegant simplicity in web design is easy. The easy flow, accessible information, and gentle nudges along the customer journey inspire user confidence in a brand. Creating elegant simplicity requires detailed knowledge of site visitor behaviors, brand messaging, and design best practices.

Improperly placed popup calls-to-action, offset page copy, or confusing navigational cues can all lead to a poor user experience and erase the notion of effective simplicity.

simplicity is the ultimate sophistication

The elements of simple web design will only grow more important as users crave personalization, intuitiveness, and accessibility.

Simple, user-experience-optimized web designs build brand credibility and encourage conversions. Use the core concepts of simplicity to move your own website projects closer to a place of simple elegance and user-friendliness over time.

The post The Complexity of Simplicity in Web Design appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/complexity-simplicity-web-design/feed/ 0
Why Thinking Ahead Is Crucial in Web Design https://speckyboy.com/thinking-ahead-web-design/ https://speckyboy.com/thinking-ahead-web-design/#respond Thu, 17 Oct 2024 09:23:16 +0000 https://speckyboy.com/?p=127576 Good planning will help to avoid a messy build process. We take a look at a few key items to consider before sharing your ideas with a client.

The post Why Thinking Ahead Is Crucial in Web Design appeared first on Speckyboy Design Magazine.

]]>
The difference between building a great website and a mediocre one is usually determined very early on. It’s often a matter of a web designer painting their project into a virtual “corner”. That’s where a design becomes inflexible and unable to accommodate various use cases.

This tends to happen in the prototyping phase. We spend lots of time and creative energy on an idea that looks awesome. Our clients might love it just as much as we do. But only when we actually start to build it do we begin to fully understand the consequences.

A design mockup serves as a compass for our website projects. If we fail to think ahead with regards to what certain elements require, it could mean being stuck in a bad situation. The end result is a site that has to make some serious compromises in order to work on different devices and browsers. That can negatively impact accessibility, performance and adherence to best practices.

Thankfully, some planning will help you avoid a messy build process. Let’s take a look at a few key items to consider before sharing your ideas with a client.

How Elements Adapt to Different Screens

There’s a reason why there’s so much talk of a “mobile first” approach to web design. In essence, this allows us to start with the bare essentials of a website. From there, we can add and enhance as the viewport gets larger.

Still, each of us have our own preferences for building prototypes. For those still using a desktop-based approach, it’s important to think about how all of those fancy design elements will work on a phone.

If you plan on implementing CSS Grid or Flexbox, they’ll help a great deal in terms of making the best use of available screen real estate. But other elements may require more effort to get working.

Large sliders, for example, can become very difficult to use on small screens. Intricate images might not be as impactful and text may overrun boundaries. Performance may also lag.

In this case, you might have to decide if the slider is worth showing on mobile at all. Or perhaps it could be refactored to better adapt to work in all situations.

Electronic equipment on a desk.

Accessibility Impacts

Design starts with picking the appropriate fonts and colors. They’re both deeply connected to branding and accessibility.

Fonts should be crisp and sized for legibility. While fancy script and decorative type can look beautiful, it needs to be large enough to read and restricted to usage in headings. If those requirements can’t be reasonably met, it may be best to drop them from your project altogether.

In addition, color contrast should also be a major concern. Background and foreground colors must achieve an acceptable contrast ratio in order to be considered accessible. Plus, it’s just good practice.

If you’re unsure about your palette, use an online tool to determine its suitability. Sometimes, even a slight adjustment is all that’s needed to pass WCAG AA standards.

Beyond those two items, it’s also good to have a plan for how you’ll display elements such as icons. Are they intuitive? Will they be accompanied by text?

Accessible parking sign.

Backwards Compatibility

Not every website has to be fully-compatible with, say, Internet Explorer 9. And legacy browsers shouldn’t necessarily deter us from using the latest CSS or JavaScript. But some thought should be put into backwards compatibility.

Of particular concern are design elements that will render a website completely unusable in older software. Even if a particular browser makes up a small percentage of your site’s visitors, that’s still leaving some potential conversions on the table.

It’s worth considering what effect design decisions will have on these users. The available fallbacks for a given technology might be enough to keep things looking decent and usable. Even better is that they can be fairly simple to implement.

It used to be that designers were expected to ensure elements looked and functioned exactly the same across all browsers. That may be too much of an ask these days. As long as a user can navigate and consume content on some of the more ancient software, that just might be enough.

A vintage computer.

Scenarios That Haven’t Happened Yet

Even the smallest websites will have a need to evolve over time. As new types of content are added, they’ll need to be accounted for in the design. If you’re not prepared, implementing these items could conflict with what’s already there.

Think of adding a series of videos, for example. While the process of adding that content may be easy enough – how will it fit into the look you’ve already established? Will you utilize a default browser UI or craft something to match your branding?

While you can’t always predict the future, you can plan for all sorts of possibilities. This is part of what a design system allows you to accomplish. By setting some default guidelines right from the start, you’ll have an easier time dealing with future additions.

The reality is that what we design today will likely change in the future. Therefore, it pays to be ready for that eventuality.

A person viewing futuristic art.

Building It Right the First Time

Crafting that first mockup is about so much more than just making things look good. It even goes beyond impressing your clients. Indeed, it’s an exercise that forces us to look at our project as a whole.

The aesthetics must be pleasing to the eye. But the design must also be accessible and able to adapt to various screens. Plus, it may have to accommodate different types of content as things evolve.

If that sounds overwhelming – take a deep breath. This is where your experience and expertise can come to the rescue. The right tools can also pitch in.

Think about what has worked (and what hasn’t) in your past projects. Look for ways to implement features that are resilient. Do that and you’ll be on your way to a successful project!

The post Why Thinking Ahead Is Crucial in Web Design appeared first on Speckyboy Design Magazine.

]]>
https://speckyboy.com/thinking-ahead-web-design/feed/ 0
How to Stop Design Clients Making Too Many UX Decisions https://speckyboy.com/clients-make-too-many-ux-decisions/ https://speckyboy.com/clients-make-too-many-ux-decisions/#respond Wed, 16 Oct 2024 05:06:28 +0000 https://speckyboy.com/?p=131089 Leaving UX decisions to non-designers could be disastrous. We explore some ways you can keep your clients at a safe distance from UX.

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

]]>
The boundaries between a web designer and their client can often become blurred. Designers, in an effort to please paying customers, put client feedback into action – even if it leads the project in the wrong direction.

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.

A person holds a marker.

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.

A sign that reads "We Hear You."

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.

]]>
https://speckyboy.com/clients-make-too-many-ux-decisions/feed/ 0
A Focus on the Basics: Must-Have Features for Your eCommerce Website https://speckyboy.com/must-have-features-ecommerce-website/ https://speckyboy.com/must-have-features-ecommerce-website/#respond Fri, 11 Oct 2024 07:57:53 +0000 https://speckyboy.com/?p=128216 We eschew all of the bloated features and turn our attention to the basics of eCommerce web design. Here are a few must-have features for your shopping website.

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

]]>
Building a website sometimes becomes a race to cram the most features into the final product. This rings especially true when it comes to eCommerce, where massive amounts of bells and whistles have become the standard.

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.

Product filtering options on Amazon.com

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.

A related product listing from Crutchfield

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.

Recently viewed products list from LL Bean

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.

Etsy offers the option to create an account or checkout as a guest

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.

]]>
https://speckyboy.com/must-have-features-ecommerce-website/feed/ 0