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.

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.

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.

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.

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.

But functionality is only part of the package. Many WordPress plugins also come loaded with their own CSS. Sometimes, those styles are quite noticeable on the front end of your website.

Theoretically, it can be a good thing. But some of this CSS is very opinionated. It can look significantly different than the styles you’ve already established on your website. Therefore, the more plugins you add, the more inconsistent your website’s look can become.

The good news is that there are a few different ways to tackle the problem. Today, we’ll introduce you to some techniques for keeping a plugin’s CSS from disrupting your UX.

Override the Plugin’s CSS in Your Theme

The first method for dealing with rogue plugin styling is fairly straightforward. But it does require a bit of patience. It involves finding any specific CSS classes or IDs that aren’t matching up with your site’s UI.

Locating the appropriate CSS requires some knowledge of your web browser’s developer tools. By right-clicking an element on the page and selecting “Inspect” (or “Inspect Element” in Safari), it will display the related HTML markup and CSS.

From there, it takes a little experimentation. For example, sometimes the element you right-clicked isn’t necessarily the one controlling the style. That requires navigating within the inspector’s HTML and clicking on things like parent containers or links.

It helps if you know what you’re looking to change. CSS background-color or font-size properties, for instance, can be easier to spot than some others.

Once you find the correct styles, copy and paste them into your theme’s style.css file. Alternatively, you might also use Additional CSS panel within the WordPress Customize Screen and paste the code there (we’ll discuss other options below). Then, make any desired changes, upload or save.

Hint: You only need to include the CSS properties within a class or ID that you intend to change. Everything else can be omitted.

This technique is handy for situations when there are a small number of styles you’d like to change. However, it can be cumbersome if you want to make wholesale changes.

Dequeue Plugin Styles and Start from Scratch

This method requires a time commitment, along with some intermediate-to-advanced CSS skills. And you may even want to reserve it for situations where a plugin’s styles are really getting in your way.

We’re talking about using the WordPress wp_dequeue_style() function, which removes a previously enqueued stylesheet. This can be used to effectively turn off any stylesheets related to a plugin.

Once you’ve turned off a stylesheet, you can take the plugin’s styles and edit them however you like. It can be a big job, but also a way to ensure that the styles are exactly what you want them to be.

The WordPress Developer Resources site has a great example of how this is done. One of the keys to success here is finding the stylesheet’s registered name. This could be found within the plugin’s code, or you might also find it in the source of a front-end page, labeled as the stylesheet’s ID.

In addition, you’ll need the CSS associated with the plugin. Again, you’ll want to dive into the plugin’s folder to find the files you need. Their contents will need to be copied, pasted into your theme’s style.css and changed to meet your needs.

Still, there are plugins that have a lot of styles. WooCommerce is a prime example. It comes packed with a significant amount of CSS. The styles work well enough, but can sometimes clash with your theme.

If you want to dequeue all or just specific WooCommerce stylesheets, their documentation can guide you through the process.

More Tips and Troubleshooting

Getting a plugin’s CSS to bend to your will can be tricky. Things don’t always work the way you want them to the first time around. With that in mind, here are a few other tips and troubleshooting ideas to consider:

Check Plugin Documentation

In some instances, a plugin’s documentation can provide solid advice for implementing style customizations. In addition to the methods mentioned above, there may be other options – such as back-end settings or plugin-specific theming.

Also, be sure to check out support forums. The odds are that someone has already asked questions regarding custom styles. There may be some valuable information to help you along the way.

Experiment in the Browser’s Developer Tools

We already mentioned how important the browser’s developer tools are to finding the styles you want to override. They are just as crucial to troubleshooting when things don’t work as intended.

For instance, the inspector tool can help you determine where a custom style falls within the cascade. Another style may be taking precedent, or perhaps you’re viewing a cached version of the page.

Even better is that you can edit styles right within the inspector and instantly view the results. This will let you see what a change looks like before you deploy it.

These tools might become your best friend in squashing bugs. Get to know them!

Implement Changes in a Sustainable Way

If you’re going to spend time customizing a plugin’s styles, you’ll want to make sure they are implemented sustainably. That means placing them in a location where they’ll be safe from being erased or inadvertently changed.

Placing styles within your theme’s main stylesheet is OK – provided you know that they won’t be lost after a theme update. Child themes are a great way to protect against this.

To keep things better organized, it might be worthwhile to throw all of your custom styles into a separate stylesheet. This way, you’ll always be able to find those specific styles when you need to make a change.

In addition, keep a close eye on plugin changelogs. Styles do evolve, and what you customize today isn’t guaranteed to work forever.

Give Your WordPress Website a Seamless Look

In general, WordPress plugins are terrific. But it can be a challenge to get their associated styles to fit in with the rest of your website. Still, you can get there with a little bit of digging.

With the help of your web browser’s developer tools, you can locate the CSS classes and IDs you want to change. From there, it’s a matter of applying those changes in a way that works best for your needs.

It takes a keen eye, but the effort can really pay dividends. When every aspect of your website looks and feels consistent, it’s that much easier for visitors to navigate. In addition, content develops a natural flow. The user experience will be all the better because of it.

The post Many Plugins, Many Styles: Creating a Consistent User Experience with WordPress appeared first on Speckyboy Design Magazine.

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

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

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

Define the Stakes

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

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

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

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

Welcome Feedback, but Set Boundaries

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

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

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

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

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

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

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

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

What do you think?”

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

Put UX Back Into the Hands of Experts

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

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

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

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

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

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

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

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

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

Press Play for Hours of Fun

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

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

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

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

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

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

The Challenges of Arcade Game Design

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

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

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

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

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

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

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

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

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

What Do Websites and Video Games Have in Common?

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

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

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

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

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

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

Learn from the Classics

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

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

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

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

The post Want UX Inspiration? Look To Classic Video Games appeared first on Speckyboy Design Magazine.

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

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

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

Modal Windows That Change Your Scroll Position

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

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

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

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

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

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

Requiring Extra Clicks To See Full Content

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

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

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

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

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

Third-party Features That Slow Page Load

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

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

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

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

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

Multimedia That Scrolls With the User

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

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

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

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

Is Your Website Frustrating Users?

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

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

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

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

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

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

That’s because a visitor typically reacts to what they see in the first few seconds after page load. Anything not visible within that timeframe will likely be missed. Designers and content creators alike have to carefully consider what is included.

While some items will be effective in getting the point across, others will fail. This is what I like to call “wasted” space. Unlike whitespace, the wasted variety takes up valuable screen real estate without adding any real value of its own.

How do you know what’s worthy and what’s not? Let’s take a look at some telltale signs that point to a waste of space.

Large Images That Distract from Your Content

Both designers and website owners alike are big fans of utilizing large photos. Whether they serve as the background to a section of content or the entire page – full-width photos are in fashion.

While this can add some real beauty to your design, the context in which these images are used is important. It’s worth considering how they impact the rest of your content.

For instance, a stunning photograph that fills up the screen may look cool. But, does it serve a specific purpose? Does it provide some context for visitors?

If the image isn’t directly accompanied by content, you’re forcing users to scroll down to look for what they need.  And if the image is too busy, it may further distract from your content. Complex images that serve as a background to text and calls to action could negatively impact legibility as well.

It’s great to have images that stand out. But without purpose, they’re likely taking space away from something more important.

Hero Areas That Lack Actionable Information

A well-crafted hero area will draw a user’s attention. By using a photo, video or contrasting color background, this element naturally separates itself from everything else on the page.

This is why we often utilize hero areas for vital information. Within them, our most important sales pitches and messaging find a place to shine. These are the items that we want to be at the forefront of a visitor’s mind.

Unfortunately, there are times when this element isn’t so informative. The included text may be vague and fail to make a coherent point. The design itself could suffer from the same affliction, with no discernable places to click or actions to take.

No matter how compelling a hero area looks, the content must be every bit as detailed. It needs to provide a simple path for users to follow. In essence, it should include a clear message that motivates the user to do something. That could be contacting you, viewing a pricing page or adding a product to their cart.

Otherwise, the risk is in gaining a user’s attention without giving them anything to do. It’s the web equivalent of a bridge to nowhere.

Long Passages of Uninterrupted Text

A user’s time is precious. They tend to scan content in an effort to find something of interest. Thus, their attention spans aren’t conducive to long passages of text.

The shame of it is that, no matter how great your writing is, users may simply ignore it. In that respect, the content may as well not exist. The result is an expensive, time-consuming waste of space.

But don’t throw your hard work in the trash just yet. There are ways to spruce things up in a manner that is easier-to-digest:

Use Headings

Headings are perhaps the easiest way to break up a long passage of text. With sound use of typography, they instantly stand out to users. This makes it much easier to pick out a relevant section and scan it for more information.

Separate Content via Design Elements

The practice of sectioning off content with the use of design elements has become increasingly popular. It allows designers to create some visual separation and develop a rhythm. The idea is to place separate-but-related portions of text into dedicated containers that look differently. By using multiple background colors or text styles, this content can be both appealing and effective.

Add Smaller Details

It’s often the little things that make a design truly great. And they can be quite useful for helping to break down content into bitesize pieces. Elements such as dividers, images and blockquotes are all great methods to implement.

An Effective Use of Space = A Better User Experience

Design and content strategy are very much intertwined. When one fails, they both suffer the consequences. Therefore, it’s vital to think about both when building a website.

Part of the challenge is in making sound decisions. For instance, you’ll have to decide which elements should be front-and-center. What is it that users need to know right from the start? What can wait or be tossed aside? It’s a competition to determine what belongs and what doesn’t.

In practice, it’s about making the most of the space and time you have to make a good first impression. When users have a clear path to find or do what they want, they’re more likely to stick around.

The post Avoiding Wasted Space on Your Website appeared first on Speckyboy Design Magazine.

Thus, I’m nostalgic for the culture of those days. I love 90s music, movies, and television. And I’m always up for a chat about the early days of the web.

But there is something I miss. It’s the idea of a shared experience. A cultural event that seemingly everyone participates in. For example, watching the finale of a television show or a big sporting event. Something you could discuss the next day at work or school.

At scale, maybe that’s gone for good. But the web has a different kind of shared experience. This one isn’t about a cultural phenomenon. It’s about ensuring consistency for users.

Let’s look at how the web brings us together in a quirky, roundabout way. And we’ll discuss how it impacts web designers trying to build these experiences.

There Are So Many Ways to Experience the Web

Television was the go-to medium for shared experiences back in the day. Sure, there were different screen sizes and models to choose from. However, the core functionality was the same. For example, content creators didn’t need to alter their products to ensure compatibility.

There was a period when the web was this way. We all viewed websites on a desktop device. But those days are long past.

We now experience the web in myriad ways. The majority of us use mobile devices. But there are so many variables involved.

Mobile devices have a wide range of viewports. They also vary in terms of processing power. And there’s no guarantee that users have access to a high-speed connection.

Desktop and laptop devices are still a part of the equation. And even they’re getting more complex. High-definition screens are standard. But we must also account for 4k and 8k screens as well.

Oh, and we shouldn’t forget about the other oddball devices out there. You could visit websites via televisions, automotive infotainment screens, and smart appliances.

The web is everywhere. And we experience it in different ways. There’s no putting this genie back in the bottle.

How Can Web Designers Manage This Mess?

Creating a seamless experience across the board may seem impossible. And perhaps it’s unlikely that we’ll attain perfection.

There are still things we can do to create the best experience possible. Here are a few key points to keep in mind.

Aim for Simplicity in Design

Complicated design features have a place on the web. But they are exceedingly difficult to scale.

For example, you could spend hours perfecting a footer layout on a desktop device. But how does it look on a phone? You’ll likely end up going down the rabbit hole to approximate it. And things still may not work correctly on every viewport.

Complexity hurts consistency. Therefore, it’s worth implementing simple solutions. They are resilient and can withstand different scenarios.

The ideal design may be simple. However, convincing stakeholders of this can be difficult. It’s worth fighting for, though.

Use Standards and Best Practices

There are multiple ways to achieve a specific layout. But they’re not all equal. For instance, web designers have been known to employ various hacks to get results.

The result is an inconsistent user experience. Buggy layouts and design features can hurt conversion rates. They may force some users to give up on your website.

CSS and HTML have come a long way. They provide proven techniques for building stable and semantic layouts. Most enjoy strong browser support as well.

Let’s make this a rule of thumb. If a feature requires a hack, it’s not worth adding to your site. Look for native solutions instead.

Understand What’s Important to the User Experience

There’s a perception that a website must be the same on all screens. Yet some features aren’t that flexible.

Sliders are a prime example. They typically work best on large screens. But they’re often hard to use on a phone. The experience is clunky at best.

So, why do we force mobile users to put up with it? The feature may have little to no value to them.

We shouldn’t expect to replicate every aspect of a site. Instead, we should focus on what’s most important to users. It’s about how they interact with features and consume content. And we can’t forget about consistent branding.

Elements should adapt to screens logically. It’s OK to remove elements that don’t align with this strategy. You can still create a consistent UX without them.

A Holistic Approach to User Experience

Perhaps the shared experiences of the 90s can teach us something. There was consistency despite the many variables in play.

For instance, I could watch an episode of Seinfeld on a tiny, black-and-white television. Or I might watch it on a large color screen in a home theater.

Sure, the visual impact would be different. But the content was the same. And I’d have plenty of laughs either way.

This philosophy also applies to the web. People will experience it in vastly different ways. Yet it’s possible to ensure that everyone understands what’s going on.

With that, maybe the ideals of a shared experience aren’t long gone. They’ve just been repurposed for a new era.

The post The Challenges of Building a Shared Experience on the Web appeared first on Speckyboy Design Magazine.

Even large, successful corporations like Facebook, Instagram, and Spotify are frequently exposed to negative feedback. For instance, in February 2017 Spotify updated its web player, introducing a new layout, new search functionality, and artist pages.

This change caused many users to express their dissatisfaction on social media. One Twitter user even wrote: “Oh, cool, they’ve upgraded Spotify web player and made it worse in every single way! Awesome!”

So how can you prevent overwhelming your users with UI changes? Let’s take a look at a few techniques that’ll help you refine your product’s interface and keep your users satisfied.

How People Perceive Information

Today there’s a diversity of interfaces, and users must learn every time they encounter a new (or revamped) interface. Consequently, users spend their time looking for functionalities and feeling displeased.

Aalto University recently conducted research during which they modelled visual search, trying to find out how people pick up new or altered interfaces.

As a result, researchers determined that the key to fast learning for users lies in three factors: long-term memory, short-term visual memory, and eye movements. Knowledge of how people perceive visual information enables UI/UX designers to create efficient interfaces (and UI tweaks) that don’t impede users.

The question of how people scan a page for information and how their eyes move has been studied by various research companies including the Nielsen Norman Group. According to the group’s study, users generally follow three patterns while reading or observing content.

The Gutenberg Diagram

The Gutenberg diagram reflects the Western culture of reading: top to bottom and left to right. According to the Gutenberg diagram, information on a page should be divided into four quadrants, making it easier for users to perceive text-rich content:

A Gutenberg diagram introduces content arrangement principles that shed light on how to make it easy for users to find relevant content.

As you can see, users opt for scanning the top left quadrant first; this quadrant is called the primary optical area. This is where you should put your key content like a headline and a logo.

Next, the users’ eyes move to the strong fallow area. Consider putting some sort of follow-up content in this section, for example an image that illustrates the idea you’ve expressed previously.

Then, users proceed to the weak fallow area, which isn’t likely to draw much attention. This area serves as a “break” along the user’s reading path. Finally, a terminal area in the bottom right quadrant leads users to the logical conclusion. It’s recommended to put a CTA (call-to-action) in this section in the form of text, a video, or a link.

Using the Gutenberg diagram in interfaces facilitates reading rhythm along with reading comprehension. The knowledge of this pattern also gives you insights into placing important elements in the places where they’re most likely to be read or noticed.

The F-Pattern

The F-pattern represents an F-like positioning of the elements on a page. According to Nielsen Norman’s study, people start engaging with content by moving their eyes in a horizontal line. Next, they scan a vertical line trying to find the points they’re interested in, and if they find what they’re looking for, they continue scanning the content horizontally.

Nielsen Norman conducted research based on 200 participants which showed that one of the popular patterns of scanning content is F-like.

To improve the user experience, use elements like bullet points, typography, colored buttons, highlighted texts, and so on. These elements give visual weight to the interface and indicate important points.

Using the F-pattern ensures an efficient visual hierarchy on a page, so users can scan content rapidly and find quick fixes to their issues.

For example, Medium’s previous layout took advantage of the F-pattern by arranging the main content (blog posts) on the left side while putting the sidebar to the right. The sidebar on Medium contained the non-primary but still relevant content including daily digest, tags, and links to “About Us” and “Terms of Use.”

Medium’s previous layout is a vivid example of the F-pattern

Today, Medium has gotten rid of the classic thread with image previews and large headlines. Instead, new blog posts are displayed as lists, so they draw users’ attention to the authors of posts rather than just to image previews.

The Z-pattern

The Z-pattern is unofficially considered the king of landing pages since it covers important aspects including visual hierarchy, content structure, and CTAs. Unlike the F-pattern, which is more suitable for text- or content-heavy pages, the Z-pattern efficiently grasps users’ attention on landing pages with minimal copy.

As you might have guessed, this pattern represents the Z-like movement of users’ eyes.

Minimalistic interfaces can reap benefits from a Z-pattern to delight users with a consistent layout and a visually pleasing content structure.

When designing with the Z-pattern, stick to the following structure:

1. A top horizontal line should include catchy content and elements like the logo and navigation bar (so users quickly access the website’s pages).
2. Following a classic storytelling approach, a diagonal line should introduce users to the main content including the main copy, attention-grabbing images, slideshows, and so on.
3. Finally, a lower horizontal line should feature a CTA that stimulates users to perform a certain action such as signing up, subscribing, or making a purchase.

The Bottom Line:

Knowledge of visual patterns provides designers with an understanding of how users perceive and recognize the content on a page. Successfully applying these patterns allows designers to build and revamp interfaces that please users and create overall ease of use.

How to Prevent User Dissatisfaction with Interface Changes

The successful makeover of a website or an app is achieved with in-depth research that includes various kinds of usability testing. Usability testing is aimed at evaluating the design and functionality of a new or an existing system with real users. Here are a few efficient testing techniques employed by designers:

A/B Testing

A/B testing, or split testing, is a method of comparing two different concepts such as buttons, CTAs, color schemes, and banners. The aim of A/B testing is to find out which of various options is the most successful; for example, which button gets the most clicks.

Each case of A/B testing is unique. What elements you test depends on your business goals. However, in user interface design, the following elements are generally tested:

• Copy (product descriptions, button text, etc.)
• Calls-to-action (for example, their placement or wording)
• Application forms
• Layouts
• Images
• Color schemes

Keep in mind that A/B testing must be performed simultaneously, not consecutively, so you get relevant results not influenced by shifting trends or behaviors.

Doing A/B tests helps you prevent audience backlash and can even help you achieve better conversion rates by making necessary tweaks to an interface.

Online tools that help you perform A/B testing include Google Analytics, Optimizely, and CrazyEgg.

Hallway Testing

Hallway testing is an informal way to test your design with real users. A hallway test involves going to a crowded area and simply asking passers-by to test and evaluate an interface.

A local Starbucks can be a good place to go: as a rule, people are more likely to interact with strangers in cosy places with relaxed atmospheres. Besides, at Starbucks you can reward your interviewees with a muffin or a cup of coffee and increase your chances to steal a few precious minutes of their time.

Testing a design with your office colleagues will work too. In this case, you can quickly test your idea literally in a hallway or at a water cooler. Besides, some people prefer to interact with the people they already know rather than with strangers in the street.

To conduct testing successfully, plan everything in advance. Prepare layouts, test products, questionnaires, and anything else you may need during testing. Also, remember to explain the purpose of testing to your participants so they fully engage with the process.

When demonstrating your design, you may ask the following questions:

• Do you understand this caption/name?
• What do you think happens after you push this button?
• How do you evaluate the look and feel of the interface?

Though hallway testing is a preferred method of testing UX design to check if an interface is easy to navigate, it’s also used with UI design as well. By hallway testing UI designs, you’re able to find out what elements of an interface puzzle users and how your users conceive the system as a whole.

Five-Second Testing

The aim of 5-second testing (also called impression testing) is to elicit the user’s first impressions of an interface and find out if a website or an app communicates its purpose to its visitors.

Even though the name of the test implies spending only 5 seconds on interface assessment, sometimes the timeframe is extended to 10 or 15 seconds depending on the visual complexity of an interface.

During a 5-second test, users view an interface and try to remember as much as possible. Afterwards, they’re asked a set of questions that help you get a sense of their reactions:

• How would you describe the look and feel of the website/app?
• What is the website/app about?
• What elements drew your attention?
• What did you like most about the website/app?
• …and so on

Remember that it’s efficient to use 5-second testing as part of detailed research, since this test is generally aimed at evaluating a visual UI component rather than the whole interface.

Tools like UsabilityHub and Userzoom help you conduct 5-second testing efficiently.

Wrapping Up

The practice of global companies has taught us that changes in user interfaces may upset people. However, ignoring the fact that your UI needs vital changes won’t do any good either.

In order to handle the challenge of revamping an interface and not causing backlash, employ research tactics. Do usability testing and conduct user research that will help you make the necessary tweaks without scaring off your users.

The post Why User Interface Changes Annoy People & How to Handle It appeared first on Speckyboy Design Magazine.

While this is challenging for all designers, it’s especially so for solo freelancers and small agencies. Why? Because we often don’t have the budget to conduct real user testing. If you work on a lot of smaller projects, you might have to venture an educated guess or two when it comes to building a great UX. That can lead to some underperforming features.

Plus, there can also be times when our ego gets in the way. The more experience and success you attain as a designer, the easier it is to think that you know it all. This too can result in being out of step with what everyday users expect.

It’s not-so-ironic that I place myself in both of the above groups. Much of my career has been spent working with smaller clients who generally don’t budget for any extras. And, there was a time when I thought I really did have it all figured out (turns out I didn’t).

As such, I’ve tried to keep an open mind when it comes to the usability of my work. Here are a few things I’ve learned (and continue to learn) about designing with users in mind.

Always Choose the Simplest Path

It’s easy to get carried away with design. Sometimes we implement features because they’re part of a hot new trend or they help us show off our great skills. It’s also quite possible to, no matter how noble our intention, completely overthink the design process.

I think it’s a common occurrence to start of with a basic idea that, on its own, works well enough. But then we start layering on effects in an effort make things “perfect” in our eyes. What we don’t realize at the time is that we may actually be making this feature harder for users to digest.

For example, tweaking text colors until they look amazing could inadvertently degrade accessibility. Or a slick animation in a navigation bar might cause chaos for those using an older browser. Then there is that quest to preserve whitespace, sometimes at the expense of hiding important information.

Even talented designers are capable of taking a good thing and wrecking it. Therefore, it’s worthwhile to keep simplicity in mind. Fancy effects are great, but they should only be used if they actually enhance the user experience. In other words, they call attention to the right things.

The key is in thinking about what it is we want a user to do. What actions do we expect them to take? From there, it’s about creating something that makes carrying out those actions as obvious and painless as possible.

Get Clients on Board

User-centric design doesn’t always come easily. Sometimes, you have to fight for it. Or, at least plead your case.

Clients have been known to share their honest opinions about the designs we create for them. The trouble is that they, like us, are prone to having the wrong priorities.

We’ve all had experiences where a client insists on a feature being implemented in a certain way or with a specific placement. Sometimes, they hit the nail right on the head. Other times, the result is something that pleases them, yet makes the site more difficult to use.

The easiest thing is to defer to your client in this situation, but it’s not the right thing. This is where you’ll need to use your expert voice in a friendly way.

Explain your concerns as to why you would recommend doing something differently. For example, if the goal of the website is to get users to contact your client, show them the barriers that are getting in the way. Perhaps the call-to-action isn’t obvious enough or maybe contact information is too hard to find.

Quite often, clients don’t see things through the eyes of the everyday user. But once they do, they are usually willing to do whatever it takes to increase usability. It’s just a matter of speaking up when you need to.

Consider Your Own User Experience

Odds are that you’ve encountered plenty of good and bad experiences as a user. Just think about the websites you routinely visit (at least, the ones that you didn’t have a hand in building). How easy are they to use? What are the pain points that drive you crazy?

Each site, app or even operating system that you use can serve as a reference point. You can look back at them and say, “I love how that works” or “That made no sense at all.” That can and should play a role in your own projects.

For instance, one of my biggest frustrations is a banking site I visit at tax time. Once logged in, it doesn’t provide a clear path to the particular documents I need to access. I have to click around to various seemingly-unrelated pages before I can find what I’m looking for.

While I generally don’t design for banks, I do work on membership sites. This poor UX reminds me to make account information easier to find.

Of course, as professionals we won’t necessarily see the web the same way others do. But we can still apply our unique experiences in an effort to do better.

Learn and Evolve

Regardless of whether or not we have access to detailed user testing, it’s still possible to improve the usability of our work. Some of it is plain common sense. But it’s also about being in the right frame of mind when putting a site together.

The concept of progressive enhancement should always be at the forefront of what we’re doing. That might mean sacrificing a fancy, portfolio-enhancing effect in exchange for a feature that is easier to use. So be it. That’s what we’re paid to do.

And, even if we can’t perform formal testing, that doesn’t mean we still can’t ask a client, friend or colleague for an honest opinion. While this doesn’t provide the same depth of feedback, it is useful all the same.

Afterwards, we can analyze the results and see how effective our decisions have been. We’ll still make mistakes (even resource-rich companies are far from perfect). The important thing is that we learn from them and always strive for improvement.

The post Staying in Touch with What Users Want appeared first on Speckyboy Design Magazine.

In practice, this tends to result in the offering of both dark and light modes. But it’s not just for cosmetic purposes. Contrast plays a huge role in accessibility. For instance, some users with visual impairment will find a dark color scheme easier to read.

Designers are also taking a user’s system preferences into account. Some websites will now detect whether a user’s operating system is set to use a dark or light color scheme – then serve up the appropriate styles.

Still, it’s never a good idea to force users into a particular contrast mode. That’s why it’s important to provide a way to toggle between them. And that functionality is our focus for today.

Here are eight unique CSS and JavaScript code snippets for switching between dark and light modes.

Light, Dark or Black Theme

This settings panel provides three distinct color modes and is beautifully designed. The transition between modes is smooth, allowing for less-jarring changes. The menu uses HTML radio buttons that have been styled into a toggle switch. It’s simple, attractive, and functional.

See the Pen Light / Dark / Black Theme by Håvard Brynjulfsen

Easy Dark Mode with SASS

A simple checkbox powers this contrast mode toggle. From there, JavaScript is used to add a data-theme attribute to the page’s HTML tag. SASS then looks for the attribute’s value and styles the content accordingly.

See the Pen Easy Dark Mode with SASS by Kaio Almeida

Light or Dark Mode

Why not have some fun with the concept of switching contrast modes? This snippet features SVG images and animation to create a unique day-to-night toggle. Note that while it visually conveys the message, it may benefit from some accessibility enhancements before being put into a production environment.

See the Pen Light / Dark Mode by Álex

CSS Theme Switcher

Several snippets in this collection use JavaScript – but CSS is capable of handling the task alone. This example not only looks good but also implements an accessible HTML form to power the mode switch. When you create functionality that everyone can use, it’s a win-win situation.

See the Pen CSS Theme Switcher by Michelle Barker

GitHub Dark Mode Toggle

While this oversized toggle maintains its white background throughout, it does change icons along with the page’s contrast mode. Also, note that the various background shapes turn into bright neon colors while in dark mode. This adds both fun and context to the presentation.

See the Pen GitHub Dark Mode Toggle by Chintu Yadav Sara

Persistent Dark Mode

If you’re looking for simplicity, this color mode button will do the job. No fancy icons (although you can certainly add them in) or wild animation. Just a single click and some smooth CSS transitions. In addition, there’s a handy bit of JavaScript that will save the user’s preference in local storage.

See the Pen Persistent Dark Mode by Brian Haferkamp

Basic Vue Reactivity

As we’re seeing more JavaScript-driven UIs these days, it’s only fitting that we have such an example. Here, a Vue component lets users switch contrast modes via a simple checkbox. This one has plenty of potential for dressing up via CSS.

See the Pen Basic Vue Reactivity by CodePen

Dark Mode

For projects that could use a bit more creativity, this swinging-lightbulb toggle should provide plenty of inspiration. To keep things accessible, the bulb image is placed inside an HTML button element. Animation is provided through CSS. It’s a great way to spice up a portfolio or blog.

See the Pen Dark Mode by Airen

Come to the Dark Mode (Or Light – It’s Your Choice)

Adding color contrast modes to your website makes sense in several scenarios. It allows designers to offer users their choice of aesthetic while also making content more accessible.

As the snippets above demonstrate, there is no shortage of ways to implement this feature. CSS allows for near-limitless styling options, while JavaScript can provide key functionality where needed.

The post 8 CSS & JavaScript Dark & Light Mode Code Snippets appeared first on Speckyboy Design Magazine.