At Kanopi, we’re always trying to stay on top of best practices, and also always looking forward to what’s coming so we can offer our clients the most up-to-date solutions and recommendations. With that in mind, our creative team has pulled together our thoughts on what we’ll be seeing more of in web design in 2023. 

AI-generated assets

In 2022 artificial intelligence (AI) tools came to the forefront with Midjourney, Jasper, and Dall-E breaking out into the public consciousness as tools for generating (in some cases jaw-dropping) textual, illustrative and photographic assets. (note: Jasper also creates content if you need help writing blogs or social media posts).

The viability of these tools will be tested in 2023 as creative teams look for ways to incorporate them into their project pipelines. AI could potentially be a way to generate creative assets that, in the past, were cost prohibitive, especially for clients in the non-profit space. It will also allow content teams to move faster if they’ve had to rely on others for artwork to accompany their content. 

Where we will see challenges arise is in the variability of AI-generated assets. You never quite know what you’re going to get, so art directing an AI bot may prove frustrating or time-consuming. AI-generated art also raises some questions about copyright, infringement, and ownership, as well as questions about ethics and if it is actually art at all. We feel these issues will need to be further clarified before AI can be fully embraced as a production tool in agencies. It will also be interesting to watch how stock photography sites respond as users create their own AI-generated content rather than searching through stock libraries.

While there are tangible issues with using AI, the speed and flexibility at which teams can create assets using platforms like Jasper and Midjourney cannot be ignored. We see 2023 as the year in which many organizations will start to assess the benefits and integrate AI-generated copy and art into their creative workflow. All hail our robot overlords!

The end of Corporate Memphis

We’ve seen the flat minimalist illustration aesthetic known (often disparagingly) as Corporate Memphis become ubiquitous over the past few years as a way for agencies to add custom illustrations to their creative product. Generators such as https://stubborn.fun/ have further reduced the time and cost associated with custom illustration and has allowed for the proliferation of this style across the web.

**Warning: strong opinions ahead**

Here at Kanopi, this is one trend we’re happy to see is coming to an end. The Corporate Memphis style was one that was intended to communicate a streamlined, minimalist aesthetic while allowing for custom messaging in a medium that has traditionally been time-consuming and costly. In practice, however, we found the opportunities presented by this minimal aesthetic were squandered in favor of presenting stiff characters in generic environments with little to no context or meaningful connection to the content they are intended to support. In essence, this style became a substitute for stock photography, but in illustrative form. 

In 2023, we’re looking forward to a move towards meaningful, contextualized custom illustration. We also see a move towards incorporating geometric patterns and organic textures into illustrations as a positive move away from the rote flat designs which was a key signifier for Corporate Memphis.

This leads us to….

Greater emphasis on custom illustration

We see a move to customized illustration as a trend that will continue to blossom in the coming 12 months. The shift towards greater use of texture and naturalistic illustration styles is something we find refreshing when compared to the more mechanical illustrative styles used in recent years. 

Illustration has traditionally been seen as a cost and time-intensive endeavor for website owners. The emergence of tools like Procreate and Adobe Fresco has effectively lowered these barriers. Designers now have access to simple yet powerful hardware and software tools that reduce the time and cost that are usually associated with custom illustrations.

Website owners would further benefit from customized illustrations as it helps provide specific context and meaning that can be lost if using only photographic elements. The ability to incorporate micro-interactions and animations to explain products and services presents a powerful way to captivate users and draw them further into your website experience. A great example of these concepts is the Todoist website which is a masterclass in the effective use of illustration to support content.

Lastly, who doesn’t like something that is truly unique? Customized illustration allows website owners to differentiate themselves by showcasing an experience that is wholly theirs. We think this combined with the increasing creative avenues designers have to generate custom illustration will see this trend continue throughout 2023.

The return of expressive typography

Over the past decade, typography has shifted towards placing a more practical and utilitarian (often minimalist) focus on its usage for web projects. We think 2023 will see the return of expressive typography. 

We predict a greater focus on “maximalism” and adopting some of the humanist letterforms seen in vintage typography. Additionally, with the emergence of inexpensive tools like Glyphs, custom typography may also have a minor renaissance.

A return to placing greater emphasis on art-directing type will allow designers to expand the creative applications of typography in their projects. But watch out for potential pitfalls: the factors that will ultimately determine whether this is a lasting trend is how we balance user needs in the areas of accessibility and legibility with the creative treatment of typographic elements. It’s great to get creative and expressive with typography, but it’s not ok if it’s at the expense of users.

Visual storytelling grows up

At its core, design is about telling stories, so visual storytelling has always been a crucial part of effective digital experiences. The best visual narratives help distill complex or abstract concepts into easily digestible ideas for our clients

While the pandemic ushered in a return to minimalism, now designers are starting to prioritize rich visual storytelling that goes beyond copy and videos. We see a greater emphasis being placed on incorporating 3D elements, inclusive visuals, animation, and the creative use of whitespace utilized as a way to tell engaging stories. An excellent example of this is the Population Healthier microsite.

We’d caution against going too far with this, however. You want to balance the desire to add these elements with accessibility and usability best practices. Sometimes less really is more!

And if your team is ready to take your website’s design to a new level in 2023, contact us. Kanopi always creates with the future of web design in mind.

A lot has changed in the design world the past several years, especially with the tools designers use to create work for clients. Ten years ago, most designers would probably say that the primary tool they used to create designs was Photoshop; it was simply a sign of the times. There weren’t many options to choose from during those days; Sketch was only two years old and still pretty new on the scene. While Photoshop and the rest of the Adobe Suite are of course fantastic for design and imagery, they come with high learning curves and don’t always translate easily into web design. 

Flash forward to the present day and you’ll notice there are many tools to choose from. Perhaps too many. That’s a great problem to have. That means designers have options they can choose from to meet their own personal design needs, whether those needs relate to fun, work, or both. With all these options, it can be hard to figure out what tools are best for both the designer and the job.

We at Kanopi figured we would help designers who might have that problem by presenting them with the top 5 design tools that designers like to use.

Sketch

Released in 2010, sketch quickly became an industry standard for designers seeking alternatives to Photoshop and Illustrator. Since its release, Sketch has become a robust design platform for UI/UX design and won Apple’s Design Award in 2012.

OS: Mac OS

Pricing: $9.00/Mo or Yearly Plan of $99.00

Pros:

• Prototyping and design system functionality
• Robust illustration tools
• Online community of resources
• Low learning curve
• Intuitive UI
• Has many plugins
• Vector based
• Local app does not need to rely on internet connection/syncing
• Exporting assets is easy
• Offers versioning
• Can easily create and manage elements/components easy with symbols and color variables
• Imports PDFs and SVGs easily

Cons:

• Desktop application only for Mac
• Web application is not robust
• Collaboration is not seamless. Project files must be uploaded to web application
• No free version
• Local files are difficult to share compared to browser based applications
• Prototyping lacks easy sharing. Must use 3rd party applications like Proto.io
• Manual saving
• Need applications like Zeplin for developers to export css and design assets.

Figma

Coming on to the design scene in 2016, Figma was created with collaboration in mind. Its platform is an all-in-one source for designing, prototyping, sharing, and most importantly: collaborating between clients and members of your team. According to the UX Tools 2021 Design Survey, Figma was the most popular application for UI in 2021,and was the application that designers were most excited to try for 2022. Since its inception, Figma has garnered a large and prolific user base, with companies like Coinbase, Twitter, and Github using its platform to solve their digital problems.

OS: Mac OS / Windows / Linux

Pricing: Free – $45.00/mo

Pros:

• Web based application focused on real-time collaboration
• Can easily manage projects, files, and assets
• Offers prototyping that can be easily previewed and shared in the browser
• Prototyping and design system functionality
• Inspect functionality provides css for developers, removing the need for 3rd party applications like Zeplin
• Online community and resources
• Low learning curve, and provides tutorial files that help users learn the application
• Intuitive UI
• Has many plugins
• Vector based
• Exporting assets is easy
• Offers versioning
• Can create and manage elements/components easy with symbols and color variables
• Autosaving
• Auto layout

Cons:

• Internet connection can affect experience
• Needs at least 4gb of RAM
• Lack of global colors

Adobe XD

Rising from the ashes from Adobe Fireworks, Adobe XD came on to the scene with its first beta release in 2016. Since then, Adobe XD has become a robust design tool and a common alternative to applications like Figma and Sketch.

OS: Mac OS / Windows / Linux

Pricing: Free – 9.99/mo

Pros:

• Works on both Mac and Windows
• Robust prototyping that has good transitions 
• Video/Audio recording
• Can manage projects, files, asset easily
• Vector Based
• Intuitive UI
• Works with Photoshop, Illustrator, and Indesign
• Online resources for learning
• Repeat Grid feature is a plus
• Developer share feature allows designers to mark assets for export. Developers can download with a simple link
• Voice triggering in prototyping
• Auto Animate function makes animating in prototypes easy
• Prototyping is more robust than other platforms 
• Usable locally without internet connection

Cons:

• Plugin library is not as expansive as Figma and Sketch
• Collaboration is not seamless. Project files must be uploaded to the cloud
• Updating application from CC 
• Mobile prototypes can only be viewed on Mac OS

Photoshop

Released in 1990, Photoshop has served as an industry standard for photo editing, digital art, and even (up until a few years ago) web design. Despite the emergence of popular design applications like Adobe XD, Sketch, and Figma, Photoshop continues to be used for design work. According to UX Tools 2021 Design Survey, Photoshop is still used as a popular primary tool for UI design, right after Figma, Sketch, and Adobe XD.

OS: Mac OS / Windows / Linux

Pricing: 9.99/mo – 19.99/mo depending on plan

Pros:

• Works on both Mac OS and Windows
• Robust image editing capabilities
• Has sophisticated export capabilities for images
• 3D graphic rendering
• Many export options for image assets
• Texture and digital art capabilities
• Usable locally without internet connection

Cons:

• Raster based
• Larger file sizes
• No prototyping or design system capabilities
• Not engineered for UI design
• Saving out assets for dev is difficult
• No option to inspect elements for CSS
• No collaboration
• Sharing is difficult
• Grid system not as robust for UI design

Illustrator

Released in 1987 as, Illustrator has served as the go-to application for creating stunning vector graphics for many different types of design projects, even for web and UI. According to UX Tools 2021 Design Survey, after Photoshop, Illustrator is surprisingly used as a popular primary tool for UI design.

OS: Mac OS / Windows / Linux

Pricing: 20.99/mo

Pros:

• Mac OS and Windows
• Robust vector editing capabilities
• File size is small
• Usable locally without internet connection

Cons:

• No prototyping or design system capabilities
• Not engineered for UI design
• Saving out assets for dev is difficult
• No option to inspect elements for CSS
• No collaboration
• Sharing is difficult
• Grid system not as robust for UI design

Start creating!

We hope that this list was helpful in showing the best tools other designers use, as well as give you an idea on what tool works best for you.

If you need help with your designs, contact us. Our team can create designs for you that look great and get results. 

THIS BLOG POST IS NOT AUTHORIZED, ENDORSED OR SPONSORED BY ADOBE, PUBLISHER OF ILLUSTRATOR PHOTOSHOP, and ADOBE XD.

Drupal is an open-source content management system (CMS), free to download, and offers an impressive amount of baseline functionality that users can leverage right from the get-go. From there, it’s easy to expand your Drupal system and customize it to your heart’s desire with over 47,000 modules, almost 3,000 themes, and high-level custom coding capabilities.

Along with its robust features and scalability, Drupal is a great platform for web design.

Here at Kanopi, we know that Drupal development and maintenance is an ongoing process. When it comes to designing your Drupal site, you may feel as if the work is never done. Is your web design effective for your organization’s current needs? What do you need for a well-designed Drupal website? All of these questions and more will be answered in this guide.

The Components of Effective Drupal Web Design

When it comes to determining how effective your web design is, ask yourself these three questions:

1. Can supporters easily navigate to their target destination?
2. Is your website telling a clear story?
3. Do the visuals support the character and tone that your organization wants to present?
4. Can visitors find/know what the main call to action is?

If you answered yes to all four, then your Drupal website and its design are probably in good shape. If you answered no to all four, then it’s time to rethink your web design strategy. However, it’s more than likely that your answers fell somewhere in between—or you aren’t sure exactly what your answers are at all!

To help you walk through each of these questions and how web design can affect your answers, we’ll review these essential components: structure of information, wireframes, visual & interactive design, accessibility.

Structure of Information 

Let’s use an airport website as an example. Imagine a user wants to find parking availability information on an airport website built using Drupal. They check the homepage and menu, click around a bit, and land on the “Getting to the Airport” page. But there’s no parking information to be found! When they realize the information they need isn’t easily accessible, they decide to quit the page and move on.

This process of navigating a website, going to different pages, and clicking on various links is all based on your website’s structure of information, otherwise known as its information architecture.

Your website’s information architecture describes the physical structure and layout of your website’s content. Think of it as the studs a house is built on— the studs determine where your kitchen, living room, and bathrooms will be. Once that’s determined, you can then choose where your kitchen island and cabinets will go.

For your website, your information architecture helps choose how many pages there are, what type of page it is (i.e. article or list), and how these pages connect to each other. 

When it comes to web design, it’s critical to determine the structure of information if you want to answer yes to our first question: “Can supporters easily navigate to their target destination?” Before launching your site or during a website redesign, make sure you outline the information architecture and sitemap so that your information architecture makes sense and flows logically for the user.

Wireframes

Along with the structure of your entire website, you also need to consider the flow and functionality of your individual pages. That’s where a website wireframe comes in.

Website wireframes are basically a visual guide representing the framework of each page type. They aim to arrange elements in the best way to ensure your website accomplishes a particular purpose and the organization’s goals. In particular, your wireframe might depict a page layout including:

• Paragraphs
• Different media types (images, video, audio, gifs, etc.)
• The menu and footer navigation
• Calls to action placement
• List filter functionality
• Visual description of interaction points, like buttons, accordions, etc.

Along with the actual items on your page and where they’ll live, your wireframe will need to address how these components work together to tell a specific story. When it comes to wireframes, think less about the visual content and think more about user flow. For instance, will users be using one long scroll page to explore different content? Will they need to actually click on elements to engage with certain graphics?

With your website’s wireframe finalized, it’s much easier to answer yes to our second question, “Is your website telling a clear story?” This is because your wireframe ultimately dictates how you tell the story of your content. When visitors click on a web page, it’s up to the visual design to facilitate their journey.

Visual & Interactive Design 

When you think of the term “web design,” it’s not uncommon to first think about the visual aspects of your website.

Your website’s visual design refers to the aesthetics and branding of your site. This can include graphics style, logo, colors, fonts, and other visual elements. To ensure that your visual design is consistent, it’s recommended to create a brand or style guide to ensure that visual elements are used consistently throughout your site.

And, while the visual design is critical for how your users respond and engage with your site, make sure you don’t fall into the mistake of overusing visual elements and distracting users from the actual purpose of the page.

Related to visual design is interactive design. This type of design is specifically focused on the visual elements that users engage with. This includes buttons, links, slideshows, videos, and more. When it comes to visual interactive design, brainstorm the different ways you can create a visual cue. Common ways to indicate to users that a visual element is interactive are using color, shapes, underlines, and other elements that make it stand out on a page.

Determining your visual and interactive design can help you respond positively to our third and fourth questions, “Do the visuals support the character and tone that your organization wants to present?” and “Can visitors find/know what the main call to action is?” As soon as someone lands on your site, your visual and interactive design should immediately connect them to your organization and let them know which elements they can engage with.

Accessibility & Design

Accessibility isn’t necessarily a component of web design, but the concepts go hand in hand. After all, having a well designed website doesn’t mean much if it’s inaccessible. 

Inaccessible web content describes when, whether due to technology or ability, users cannot engage with or contribute to the online world. In fact, your web design is the first stage in which a site becomes accessible to all users.

Interested in learning more about web accessibility? Take a deeper dive into demystifying website accessibility compliance in our guide.

A properly designed website needs to be accessible for all users, including those with low vision, color blindness, seizures, cognitive impairments, and those dealing with situational impairments (such as a broken arm or carrying a crying baby). The great thing about Drupal is that all features of its core platform comply with WCAG 2.1 and ATAG 2.0. Drupal also has built-in accessibility features like custom color contrast and intensity and form labeling to help screen readers.

Make sure to also consider accessibility for those in different countries (Drupal 8+ users can take advantage of its multilingual capabilities) and those using different screen sizes (Drupal can account for both desktop and mobile users.)

Get Inspired: 3 Drupal Websites

When talking about web design, it can be hard to visualize exactly what these components and concepts will look like in reality. The best way to learn? By looking at well-designed Drupal websites for inspiration! Here are three examples (the first two being Kanopi clients) of Drupal websites displaying effective web design.

1. National Council for the Blind: Drupal Web Design Example

The National Council for the Blind (NCBI) is an organization that aims to decrease visual impairment reading barriers and provide digital opportunities for both learning and literacy.

A core value of NCBI is creating accessible learning and literacy, and their Drupal website does just that. Their website is AAA compliant with considerations for users with visual impairments, including color contrast, font families, and even font size.

Along with accessible design, NCBI’s website has these effective web design best elements:

• An embedded search tool with a convenient form label letting you know the content you can find.
• Bright yellow and rounded buttons that stand out from the rest of the more angular visual components.
• A sticky navigation system so users can click on the most popular landing pages whenever they want.

Read our dedicated NCBI case study to learn more about Kanopi’s role in building their website.

2. San Francisco Conservatory of Music: Drupal Web Design Example

The San Francisco Conservatory of Music (SFCM) aims to provide comprehensive music education that prepares artists for the rest of their careers. They wanted a website to reflect their exceptional education and chose the Drupal system for its visual beauty and streamlined content.

As soon as you land on the SFCM website, you’re met with an interactive logo and an audio button that plays a symphony performed by students of the conservatory. Site visitors are immediately invited in and introduced to the prestige of this musical institution—all within the homepage!

Here are some other standout web design features of this Drupal site:

• Homepage timeline that is easy to scroll through and presents SFCM’s rich history and accomplishments in a streamlined way.
• Image links that zoom in slightly as you hover over them to show that they are clickable.
• Clear branding with consistent colors of red and gold.

Read our dedicated SFCM case study to learn more about Kanopi’s role in building their website.

3. Rainforest Alliance: Drupal Web Design Example

The Rainforest Alliance (RA) is an organization dedicated to conserving biodiversity and ensuring sustainability in rainforests.

This website is beautifully designed and easy to engage with, introducing visitors to all of the progress the RA is making. As you scroll down the homepage, you’re met with posts on an embedded social media feed, recent news articles, the RA’s main mission, and what supporters can do to help!

In particular, the RA website boasts these web design features:

• Graphic links that change colors as you hover over them to indicate that they are clickable.
• A menu in the footer to switch languages with ease, from English to French to Chinese and more.
• Dynamic graphics and images that blend seamlessly together to create a visually engaging homepage.

Curious to learn more about this project? Check out Drupal’s dedicated case study on the Rainforest Alliance.

How a Drupal Web Design Agency like Kanopi Can Help

Your Drupal website’s web design is not something you want to take lightly. If you find yourself needing more extensive web design help or you work with a larger organization with more complex needs, partnering with a Drupal web design agency like Kanopi might be exactly what you need.

With Kanopi’s team, you gain support from professionals with years of experience developing, supporting, and designing Drupal websites. Consider the following benefits of partnering with Kanopi:

• Each of Kanopi’s Drupal team members has, on average, 11 years in Drupal Development, and several of our team members are Acquia-certified. 
• Many Kanopi members are also considered thought leaders in the industry and speak regularly at DrupalCon and Drupal Camps in North America.
• Kanopi is a supporting partner to the Drupal Association, contributes regularly to the Drupal Project, and is one of the main organizers of BADCamp.

We’re not only fully updated on the latest website best practices, accessibility trends, and Drupal updates, but we also take a continuous improvement approach to site development, ensuring that your web design always serves your organization and meets your customers’ needs.

And, we help teams avoid the dreaded “Swoop and Poop” management phenomenon by aligning senior-level stakeholders on expectations and goals. We create open lines of communication within your team to ensure everyone is on the same page and working to support your main objectives.

Kanopi Drupal Web Design Services:

• Mood Boards – We work closely with your organization to create mood boards that act as design ‘snapshots’ to help convey your site’s overall feel and aesthetic. We use any existing brand signals and can create new ones if needed. This allows your organization and other stakeholders a chance to give input on the ground level prior to the heavy lifting of design.
• Design Mockups – Want to see what your website might look like? Here at Kanopi we can create design mockups of your site once all the building blocks are pulled together. This way, you can ensure the web design reflects your brand and meets all expectations.
• Style Guides – To ensure your web design remains consistent and true to your brand, we work together with your team to create the ultimate style guide. Your style guide will contain elements of brand voice and tone, typography, colors, logo usage, and more to create standards to guide our web design team.
• Research Discovery – When it comes to web design, user flow and interaction play a large part in what media elements you use and how you organize them. To make sure that your website serves your audience, we undergo user research and even create user personas. Doing so illuminates similarities and differences in how site visitors act to ensure your site meets your goals and reaches the right audience.
• Design AA Accessibility Standards – Our accessibility standards are built into our system and are a top priority for all of the sites we help design, develop, and support.
• Prototype Interactions – Along with design mockups and style guides to address the more visual design aspects of your website, our designers also can help you map out the interactions. We don’t just design what you see in a screenshot, but also how each element clicks, swipes, scrolls, and more. We work closely with you to determine the UX layout that best serves your audience with different wireframes and prototypes you can explore.
• Testing And Support After Launch – Our work doesn’t stop once your website is live. As soon as it is launched, we will continue to test the site to make sure user interactions and the design of your site moves users forward to their goal. If support is needed after launch, our Kanopi design team is still there to assist, answer any questions, and ensure your site is set up for long term growth.

No project is too large for our Kanopi Drupal team. Whatever stage your site is in, we’re ready to jump in and assist with web design, development, and support to get your Drupal site where it needs to be.

What works when it comes to user experience (UX) is constantly evolving as our behavior online shifts and changes over time. A web design feature that delighted your site users ten years ago could now inadvertently conceal valuable content that you want to take center stage. Or worst-case scenario, it could be driving folks away from your site. 

To help you keep on top of the latest UX design trends, we’ve pulled together the five most common UX mistakes made in the past year and explain why each is causing issues when it comes to the user experience. We also suggest better options for each design mistake to ensure your site remains as accessible and sustainable as possible:

1. Problematic carousels 
2. Intrusive pop-ups 
3. Unnecessary side-bars 
4. Distracting auto-play videos 
5. Too many buttons 

Problematic carousels

Home page carousels are a trendy design feature on many websites as they are thought to provide a clever way to condense a lot of content into one screenful.

What’s the issue? 

If the carousel auto-rotates, users may not have enough time to read before the slide changes. And our tendency to scroll down the page is increasing. A study conducted by the Nielsen Norman Group found 57% of site users stay above the fold of a webpage compared with 80% of website users over a decade ago. 

Content can be missed as website users often scroll past the carousel and miss vital information that doesn’t appear on the first slide.

If the content on the first slide doesn’t align with the organization’s values, it can give website users the wrong impression and even be misleading. 

Finally, in many cases, you cannot simply scale down to a mobile device. Content may get cut off or become too small to read when a user views your content on their mobile device.

A better way 

Instead of using a carousel of images, choose a single, impactful hero image and display key goals of both your users and your business to guide the user journey.  

You can also try using a card design pattern to get across two or three key messages on your homepage. 

Examples of good card design:

• Names for Change
• Ideo
• Try Caviar

Intrusive pop-ups

Pop-ups held a reputation as a great marketing tool in the past. They were proven to be very effective at generating leads, for example.  

But with Google’s January 2017 update, sites that contain pop-ups or interstitials that make content less accessible are penalized in their search rankings. And Google has identified what is good and what is a bad pop-up.

What’s the issue?

Pop-ups can interrupt the natural flow of the website user by hijacking the current webpage to highlight new information on an additional screen.

Pop-ups also affect the accessibility of your website. They create keyboard traps and unnecessary screen reader content that can confuse and distract users trying to navigate your site. 

Aside from making your website accessible to more users, there’s also a business case to be made for making your site’s popups more accessible.

A better way 

Make sure you comply with Google’s guidelines when it comes to pop-ups to avoid being penalized by Google. 

Google explains the following techniques make content less accessible to a user:

• popups that cover the main content, either immediately after the user navigates to a page from a search result, 
• Displaying an interstitial that the user has to dismiss before accessing the main content, and 
• Including a layout where the above-the-fold portion of the page is too similar to an interstitial, and the original content is inlined underneath the fold.

Displaying content you’re inclined to include in a pop-up in a sidebar instead is best practice (as outlined in the Neil Patel example above), as is delaying the opening of pop-ups on your website if you must have them. 

Lastly, If you have to use pop-ups, design your pop-ups so that they take up less than 50% of your web page’s space.

Unnecessary sidebars

On-page navigation via a sidebar provides links to related content or provides pathways for a deep content dive.

What’s the issue?

With unnecessary sidebars, some of your most valuable content can quickly become inaccessible. Remember, clicks are valuable. You risk losing potential customers if users have to click around to find the content they are after. 

In addition, if your website’s on-page menu changes once a link is chosen, your site users can end up feeling lost and confused while trying to navigate your content. 

And finally, in many cases, many sidebar menus are not adequately designed for interacting with content through mobile devices, affecting the responsive design of your site.

A better way 

Source: Craigslist Redesign by Aurélien Salomon for Orizon

Instead of having important content buried in a sidebar, combine similar content together onto one long page. Your website visitors are naturally conditioned to scroll.

A nudge to scroll provides a handful of other benefits:

• It delivers content more quickly because there is no need to wait for pages to load
• It doesn’t require a commitment by forcing users to choose a button — or pick between multiple buttons — and abandon their current page
• It allows visitors to digest information at their own speed

Besides providing a scrolling option, try using a drop-down menu design pattern that passes usability testing with flying colors and creates an enhanced user experience, guiding the user journey in the process.

Examples:

• Asana
• Khoros
• Evernote
• Figma

Distracting auto-play videos

Auto-pay videos use sights, sounds, and moving imagery in an attempt to create emotional connections with site visitors.

What’s the issue?

Auto-play videos can trigger your site visitors to experience dizziness and nausea. And if that auto-play video is accompanied by sound, it can be loud and confuse your website visitors.

Videos assume that your site users can see. They can have a negative physical impact on those sensitive to movement and ultimately limit the accessibility of your website.

In addition, large video files can slow down site speed, impacting the overall UX of your website and your site’s Core Web Vitals, which now affect where you end up in search engine results. 

And finally, videos tend to distract your site visitors, grabbing more of their attention than you intended. They do not support the immediate consumption of information.

A better way 

Video and sound content is helpful only if your site visitors have control over it, fully understand what’s contained within it, and are provided with an alternate way to access it. 

Give your website visitors the ability to decide how they interact with the video and sound content on your site by literally putting the controls on the video area for an improved user experience. 

Too many buttons

Buttons are a common UX design feature for ensuring your site visitors have all the available options at their fingertips.

What’s the issue?

We aren’t against the use of buttons, but too many buttons can harm. If you force too many options on your site visitors, they may opt for the path of least resistance – to leave your site. 

Too many buttons competing for the attention of site visitors makes it difficult for the user to focus on individual pieces of content on your website.

A better way 

Less is more when it comes to great UX design. Focus on making your main call-to-action (CTA) as straightforward as possible and make it easy to find with one stand-out and consistent button design. If you have secondary CTAs, use a smaller, less flashy button or link design.

Prefer to see this in a video?

I presented this talk at the NTC Conference in March 2021 and provided a bit more information. Check it out.

Avoid these common UX mistakes to make your site a joy to navigate   

Building a sustainable website that’s delightful to use is about catering to your users’ wants and needs while assisting you in achieving your business goals. A powerful way to ensure your site meets the needs of your users is by avoiding common UX mistakes. 

These common UX mistakes made in 2020 were first presented at the Nonprofit Technology Conference (NTC) earlier this year. You can watch the presentation in full on YouTube.