For users with desktop and laptop computers, cursor effects can add an element of fun. They can also tie in with branding. Think of a Star Wars-themed website that uses the iconic Lightsaber as its cursor. The possibilities are intriguing, to say the least.

Thankfully, creating these effects doesn’t require any Jedi mind tricks. Instead, a bit of CSS and JavaScript is all that you need to get started.

We scoured the universe of CodePen in search of cool cursor effects. Here are eight code snippets that showcase the creativity of web designers.

The post 8 CSS & JavaScript Snippets for Creating Unique Cursor Effects appeared first on Speckyboy Design Magazine.

We often use established design patterns. Navigation is placed at the top or along the side of a page. Headings and white space create content separation. You get the idea.

This process works well. But CSS allows us to go the extra mile for users. We can now cater to their preferences as well.

By detecting a user’s system preferences, we can serve styles to match. It’s all possible through CSS media features.

Here’s a look at the various user preferences we can detect. We’ll also explore how they can help us improve usability and accessibility.

What’s Being Detected? Where Does It Come From?

The term “user preference” can have multiple meanings. In web design, it has traditionally referred to saving preferences locally. A user selects from various options on your website. From there, preferences are stored and retrieved via a cookie.

But CSS enables a different approach. A media query can detect user preferences at the device level. That allows us to retrieve a user’s configuration. We can then adjust the website’s styles accordingly.

This isn’t a way to spy on users. The data doesn’t look at personally identifiable information. The user isn’t required to have an account on your website. And the data won’t allow you to track someone.

Users can set preferences in their browser or operating system. Color schemes (dark or light), color contrast, and reduced motion are primary examples. It’s up to individual websites to detect and/or respect those settings.

This method increases privacy and efficiency. Users don’t have to divulge personal information. And web designers won’t have to build custom settings.

Examples of Detecting User Preferences with CSS

Now it’s time to explore a few examples. We’ll use three media features included with CSS.

Color Scheme

The prefers-color-scheme media feature detects a user’s device color setting. The choices are “light” or “dark” modes. Both mobile and desktop operating systems offer this feature.

If a user prefers a dark color scheme, you can use CSS to implement relevant styles. Below is an example of prefers-color-scheme in action.

See the Pen Using CSS prefers-color-scheme by Eric Karkovack

So, what if a user doesn’t want a dark website? You can use a toggle to let them switch between modes. Providing this flexibility makes your website even more user-friendly.

Color Contrast

A high-contrasting color scheme is easier to read. Operating systems tend to include the option in their accessibility settings.

It’s possible to detect this preference via CSS prefers-contrast. This setting allows for a bit more ambiguity than prefers-color-scheme. Options for “more” and “less” are the most common.

However, the “custom” option requires a specific set of colors. In that case, we can use forced-colors to adapt the page.

The following example uses a gray background by default. If the prefers-contrast preference is set to “more,” we’ll change it to white.

See the Pen Using CSS prefers-contrast by Eric Karkovack

Reduced Motion

Web animation can be a great thing. It adds interactivity and context to an element. But certain types of animation can be harmful.

Users with vestibular motion disorders can become ill – or worse. That’s why it’s best to avoid intense flashing animations.

Some devices have a setting that requests that websites use minimal motion. The prefers-reduced-motion media feature will detect the setting.

The following example includes a rotating square. Note that we’ve been careful to use a slower form of movement. But if the prefers-reduced-motion setting is “reduce,” we’ll stop the animation.

See the Pen Using CSS prefers-reduced-motion by Eric Karkovack

Want to try the setting? MDN has a handy guide for locating it on your device.

Instantly Improve the User Experience

CSS provides some great ways to detect user preferences. They’re easy to use. And they take the guesswork out of building clean, accessible UIs.

Granted, we don’t have to follow a user’s device preferences. And our clients may be wary of different color schemes.

But even slight tweaks to reduce motion and increase contrast are helpful. They amount to little things we can do to improve the user experience (UX). That will benefit everyone.

The post How to Detect User Preferences with CSS appeared first on Speckyboy Design Magazine.

Not that these files are in any way vital. It’s just that you see them everywhere. Their continued presence is both understandable – and a bit baffling.

PDFs can be viewed on any platform or device. Native browser support makes using these files a no-brainer over proprietary options like Microsoft Word.

And they’re also quite flexible. It’s possible to embed anything from multimedia to interactive forms inside a document. Plus, they retain formatting. Fonts, colors, and layout are consistent – no matter how you view the file.

It’s not all sunshine and rainbows, though. PDF files can run into accessibility issues. And some files can be quite large – eating up precious bandwidth.

Perhaps the biggest drawback of PDF is in how we use it. Maybe it’s laziness or a lack of forethought. But in many instances, PDFs aren’t necessary.

So, where do PDFs fit in? Let’s explore when uploading a PDF to your website does (and doesn’t) make sense.

The Role of PDFs on Early Websites

The primary reasons we use PDF can be traced to the early web. We didn’t have the advanced CSS layout techniques of today. Browsers were ill-equipped for much beyond a single-column page. And web typography was severely limited.

Thus, PDF provided a more polished look than HTML. Users could also expect more consistent results when printing these files. So, even when weighed against slow connection speeds, the format made sense.

To some degree, PDFs represented the web’s future potential. The ability to create multi-column layouts that mimic print. Large images and multimedia presentations took center stage. Fonts that added personality and worked on every screen.

At the time, the format gave designers the advantages of utility and vanity. PDF could do things that a web page couldn’t. That made it a popular choice – even if it wasn’t always the right one.

The web has evolved, however. The advantages of using PDF aren’t quite as clear. CSS and HTML have matched (and maybe surpassed) many of PDF’s core capabilities.

Are PDFs a ‘Lazy’ Way to Share Content?

PDF files also add a layer of convenience for web designers. That can be both a good and bad thing.

Tools such as Adobe Acrobat make it easy to convert files to the format. And content management systems (CMS) like WordPress make uploading and media management a cinch. Thus, it’s tempting to use PDF even when it’s not necessary.

For example, let’s say a client sends us a Word document. It has some complex formatting. And perhaps we don’t feel like trying to clean up an HTML export of the text. In this case, converting the document to PDF is simply easier.

Or maybe that client sends us a file that’s already a PDF. Exporting to HTML has improved over the years. But it can still be a hassle. Once again, it’s easier to upload the file rather than tidy up a mess.

It’s difficult to blame anyone for using the easiest solution. But there’s a cost:

• It forces the user to make an extra click to access the file;
• The file may or may not be easily accessible to screen readers or other assistive technology;
• PDF files tend to be difficult to read on mobile devices;
• The file size may be significantly larger than HTML;
• Its content may not be as readily indexed by search engines;

Each of these factors is enough to give us pause. Convenience is valuable – but not at the expense of usability.

When It Makes Sense To Use PDF

All of this isn’t to say that PDFs don’t have a place. There are still scenarios when it makes sense to use them:

• Documents designed to be printed: Items like press kits and product manuals have traditionally used PDF. This is particularly useful when those documents are meant to be printed.
• Forms that shouldn’t be submitted online: Sometimes you don’t want users to submit a form online. For example, one that contains sensitive personal information. Medical and legal documents come to mind. In this case, the user is asked to print the form and submit it offline.
• As an alternative to HTML content: A PDF can be a handy way for users to take content with them. Consider a news article or real estate listing. Some users may prefer to download a copy rather than bookmark the HTML version. It’s also reasonable for content that is only available for a limited time.
• ‘Official’ documents: Some organizations have strict rules regarding documents. They may require users to download only the original version. With that, HTML equivalents might not be acceptable. Tax and other government-related forms are possible examples here.

This isn’t an exhaustive list. But it does show that the format still offers some benefits. Much depends on context, however.

It’s important to consider why PDF is (or isn’t) a viable option. What impact does it have on users? Does it serve the best interests of the website?

If it’s a matter of mere convenience for web designers – that’s not enough. Using PDF should result in a net positive for everyone involved. Short of that, HTML will likely be the more appropriate choice.

We Should Rethink Our Usage of PDF

Old habits are hard to break. And years of uploading PDF files have become standard practice for many of us. But it’s time to rethink this strategy.

Modern web technologies can handle virtually every function a PDF can. In some areas, like mobile usability, CSS and HTML even outshine the venerable file format.

In short, there are now more reasons to use HTML and fewer for using PDF. So, the next time you receive a lengthy Word document from a client – think about what format makes the most sense.

You may find yourself using that PDF creation software less often. That’s probably a good thing for the web and its users.

The post Why Do We Still Use PDF Files on the Web? appeared first on Speckyboy Design Magazine.

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

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

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

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

Press Play for Hours of Fun

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

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

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

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

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

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

The Challenges of Arcade Game Design

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

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

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

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

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

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

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

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

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

What Do Websites and Video Games Have in Common?

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

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

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

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

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

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

Learn from the Classics

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

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

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

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

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

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

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

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

Modal Windows That Change Your Scroll Position

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

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

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

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

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

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

Requiring Extra Clicks To See Full Content

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

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

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

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

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

Third-party Features That Slow Page Load

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

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

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

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

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

Multimedia That Scrolls With the User

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

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

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

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

Is Your Website Frustrating Users?

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

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

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

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

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

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

If it’s not intentional, you should avoid creating complex interfaces and use more space instead. Space is a basic necessity in web design, as it can make such a huge difference to all the elements on the page, and how users view the page.

In this article, we clarify the importance of negative space and share tips on how to use it correctly in web design.

What is Negative Space?

Before we start, let’s first define exactly what negative space is. Negative space, or white space, means any unused space on the web page. Anything that doesn’t catch the user’s attention on the page is negative space. This doesn’t mean the space should necessarily be white: it can be any color, an image, or any other background.

“Whitespace is to be regarded as an active element, not a passive background” – Jan Tschichold

There are two levels of negative space: micro and macro.

Micro negative space is related to the space between small elements like lines, words, and letters, while macro negative space is the space between larger blocks or elements. Both of these levels are important for the overall effectiveness of web design.

Let’s take a look at the following web page designs that use negative space well.

Apple

Apple has always paid great attention to design, and its own website isn’t an exception. Just look at how masterfully they use both micro and macro negative space. The website has a clean layout and an extremely clear call to action (CTA).

Your attention is focused on the core feature, the product itself, and nothing distracts your attention from the page. Having a single object to look at in the center of the page is a perfect way to draw in the user’s attention.

Google

Google is the granddaddy of negative space on the web. The search giant uses negative space and minimal design to drive our attention to the search bar itself.

Google guides the user to the most actionable areas of the page, namely Gmail, images, and the search bar. The design is kept clear and simple to make sure everything is clear.

Dropbox

The Dropbox homepage combines perfect micro and macro negative space, a natural color palette, and a clean font to create a calming atmosphere and a smooth user experience.

The website looks sophisticated due to the proper use of negative space, which in turn creates simplicity and cleanliness.

Shopify

The website for the Shopify eCommerce platform uses plenty of white space to achieve its main purpose: to direct visitors to sign up for a free trial.

Shopify has surrounded the sign-up form with negative space to ensure visitors won’t miss it when entering the homepage. In addition, they’ve wisely displayed the site navigation in order not to distract attention from the main part of the page.

You can see that negative space literally allows your design room to breathe. Now let’s move to tips on how to use this negative space the right way on your website.

How to Use Negative Space Correctly

1. Use negative space to break up the page

Breaking up space on a web page is one of the most essential visual components in design. When a website has too much information and too little space, it’s extremely difficult for visitors to focus on the main information.

Negative space gives users time to absorb the information they see on the page. There are a few rules that help designers create symmetric compositions on the page and ensure that people can perceive the information.

Equal space between components of the composition sets the proper design structure and helps users to perceive information clearly. According to the composition rules of web design, the space between these micro blocks should take up one-third of the space between macroblocks.

Breaks set the structural and semantic emphasis on the page.

2. Work on content comprehension

Content readability and legibility is a very important aspect of web design. Negative space can optimize both of them. Properly used space between lines, words, and letters increases reading comprehension by several times.

Paragraph margins and line spacing are two main things to keep in mind while optimizing content comprehension. The space between each line, or simply line spacing, increases the overall legibility of the body text, as shown in the following example:

3. Create visual hierarchy

Negative space isn’t just empty space between elements on the page but is an essential tool for building visual hierarchy. Negative space can compose or separate UI elements, so they create effective page designs.

It provides a welcoming layout that keeps visitors on the page longer. In addition, negative space drives user attention to the important elements and offers a break for the eyes.

4. Clarify relationships

Gestalt psychologists, while learning how people organize visual information, developed the Law of Proximity. This law states that all visual objects located next to each other appear similar to the human eye.

In web design, proper negative spacing is an effective way to implement the principle of proximity and make a design more visually appealing. For example, this principle works well for blog architecture.

By harmonically separating the bulk of text into paragraphs and blocks, designers can achieve a more digestible and pleasant layout.

The Bottom Line

As you can see, negative space is one of the most powerful tools in web design. By following some of the simple rules given in this article, you can create a perfect, visually appealing design that will be appreciated by any visitor.

The post How to Use Negative Space in Web Design Effectively appeared first on Speckyboy Design Magazine.

Some websites employ “infinite” scrolling – you scroll to the bottom of a long homepage only to see the scroll bar jump back to the middle of its track as more content loads at the bottom.

This type of scrolling can be effective in some cases, but it will frustrate users more often than not. It’s important to recognize where scrolling is effective, and what type you should use.

Complexity Demands Simplicity

Websites are more robust and content-rich than ever before, and thusly designers have conceived new ways of filling a screen with information without overwhelming users. This is especially true now in light of the fact that mobile device users outnumber desktop users. Designers must fit a great deal of content onto relatively small screens, necessitating some measure of scrolling.

Tiled or card design is the idea of creating bite-sized pieces of content (which are usually interactive links to more detailed content) for quick and efficient browsing. Couple this concept with scrolling and you can provide users with a seemingly endless content stream.

Scrolling is also naturally attractive on mobile devices. Swiping a finger is a simple, easy, yet precise motion. Users quickly learn how to swipe to reach the bottom of a page quickly, or slowly to get to the next relevant piece of content.

Types of Scrolling

Depending on your brand image and customer base, the type of scrolling you should feature on your website is going to vary. When deciding on which method to employ, think about how it will interact with the content you provide. There are four basic types of scrolling:

1. Long-Scrolling

The advantage to long-scrolling is you can create a single page of seamless content. This offers a smooth, linear browsing experience to users, and naturally lends itself to storytelling.

The Boat is a fantastic example of long-scrolling

As a user scrolls, they can absorb more of the story in a natural way, offering a more immersive browsing experience. Many sites opt for a single page with long-scrolling, but one major disadvantage to this configuration is it may hurt your site’s SEO. Websites with multiple pages tend to fare better in terms of SEO.

2. Fixed Long-Scrolling

Rather than have the entire page scroll, a fixed long-scrolling configuration keeps some content static while other content scrolls. Alternatively, you can set up your scrolling so when a user reaches a certain point, the static content shifts to a new section.

This is great for sites that don’t want to convert to a single page due to SEO concerns.

3. Infinite Scrolling

For sites that offer extremely dense amounts of content, there may be too much to load onto a single page at once. With an infinite scrolling setup, you essentially create a rhythm. Most social media are all configured for infinite scrolling. This allows users to continuously browse fresh content.

The only drawback to this is that users will be very frustrated with losing their place. If you believe that infinite scrolling would work well with your site’s content, then you should investigate sticky navigation, a toolbar or set of buttons that allow users to quickly jump back to the top or to specific areas.

4. Parallax Scrolling

Video game enthusiasts are going to feel right at home with parallax scrolling. Older video games that took place in two-dimensional environments didn’t have the technology to create the vast, three-dimensional, hyper-realistic environments seen in recent games.

Parallax Scrolling Example: Braking Badly

Older 8-bit and 16-bit games such as Sonic the Hedgehog, Mega Man, and Super Mario Bros were often called “side-scrollers.” This is because the player moved from left to right to complete a stage, and depth was created with motion.

The foreground and background would move at different speeds, creating a visual sensation of depth. Parallax scrolling in website design really shines when you can work in scroll-triggered animations.

Best Practices for Scrolling

The type of scrolling you use on your website should depend on your content. The basic function of scrolling is to allow users to digest as much or as little of your content as they wish, so it’s important to tailor the experience to your offerings.

Extremely content-rich sites may want to investigate infinite long-scrolling. This method works for social media – especially on mobile platforms – because there is simply too much content to digest in a single page, and attempting to fit every bit onto individual pages would be both impractical and unengaging.

Let your content dictate your scroll length. You can also trim scrolling with simple buttons that say “Scroll for More” or “See More.” Allow users to decide whether or not they want to keep going, and your pages will not only load more quickly, but human curiosity is going to get users to click for more quite often.

Your user data will tell you a lot about how your users interact with your site and whether or not you should rethink your scrolling configuration.

When a user visits your page, the first thing they see is the top. The bottom of their view is called a “fold,” and your Google Analytics can tell you how many users click below it and how often. This metric will tell you whether or not your current scrolling setting and site layout are encouraging users to keep scrolling down to see what you have to offer.

Sticky Navigation is a Great Tool

Regardless of what type of scrolling you choose for your site, sticky navigation is a great way to keep users feeling in control as they browse your site. Think of a web-based email client like Gmail: you can scroll down your inbox, but the bar to the left of the screen has buttons for switching between accounts or accessing different folders. Users can scroll at their leisure, but they always have the option to jump to an exact section.

Any type of site can benefit from sticky navigation. If you employ infinite scrolling, users will probably like having the ability to jump back to the top of the page with one tap, rather than continuously swiping. You can also create a header that remains on screen no matter how far down a user scrolls, offering instant access to essential functions.

Pros and Cons

As more people turn to mobile devices for browsing the web, scrolling seems to be a natural choice for websites. Of course tapping various links is quick and easy, but most users prefer to have quick access to the bulk of a site’s content as quickly as possible. You can engage your users with a robust content offering, and you won’t overwhelm them if you offer a measure of control.

However, it’s important to remember that large blocks of content or multimedia can slow down your page loading speed. This could be damaging to your users’ experiences on mobile devices, since many will be browsing with either cellular data or weaker-than-average Wi-Fi connections on the go.

You may also need to sacrifice your website’s footer. Almost every website has a footer at the bottom of the page with precise links to the company profile, where to submit a job application, contact information, and other general information. You can eliminate the need for a footer by using sticky navigation tools that users can click to go to specific areas of your site.

If you’re designing for mobile device browsing (which you should be), then the benefits of scrolling far outweigh the drawbacks – as long as you configure your site’s scrolling wisely. Mobile devices inherently encourage interaction and with wisely-crafted, responsive web page design, your users will delight in unique ways to absorb your content.

The post Scrolling in Web Design: How Much Is Too Much? appeared first on Speckyboy Design Magazine.

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.

This argument does not hold water anymore, however. As long as the content of a homepage or landing page holds the promise of good things to come, users will gladly keep scrolling as long as the content is relevant to their needs.

Long-scrolling and infinite-scrolling sites are sometimes portrayed as a new and modern web design trend. These scrolling techniques have actually been in use for many years. They have recently become more popular, which gives them the appearance of being new and innovative techniques.

Long scrolling is here to stay, and for a good reason: users clearly like it.

Long Scroll, Smart Navigation, Clever Special Effects

The increased use of mobile screens has definitely played a key role in the widespread acceptance of this technique. Attempting to navigate with buttons on a small screen can be cumbersome, and even more so as screens get smaller and smaller.

Long or infinite scrolling gets around this since both approaches lend themselves nicely to touch gestures. In combination with advances in CSS and JavaScript, the advantages of long scrolling have also created better options for web designers. Why is long scrolling here to stay, and why is “above the fold” no longer relevant in many websites?

How It All Works

Long-scrolling sites tend to work in one of two ways. Either the site has a larger homepage with links to other pages, or the site consists of a single, long page. Either setup creates a wealth of possibilities for a web designer, including the use of storytelling techniques.

Storytelling can often be made more effective by incorporating subtle special effects, such as parallax scrolling, Ajax/jQuery, or scroll-triggered animations.

Long Scrolling Used Primarily for Storytelling

A Smooth Platform

Page-by-page navigation and storytelling do not always make a good match. This type of navigation tends to be herky-jerky at best, whereas long scrolling provides a much smoother storytelling platform. Long scrolling also gives the user greater control over pacing. At the same time, its continual immersion capabilities avoids the lags between pages that can be detrimental in keeping a user-focused and fully engaged.

Giving the User Control

Long scrolling also allows creative special effects to be used more effectively. Parallax scrolling and scroll-activated animations are controlled, at least to some extent, by the user, giving the website an almost game-like feel; and definitely a friendlier one.

Why Most People Like Long-Scrolling

Making the Most of a Memorable Design

You could easily get the impression that long-scrolling pages opened the door to the use of highly innovative, memorable, visual designs. In truth, it’s the other way around. These cool design types have long been with us.

To put it simply, if you want your site’s visitors to keep scrolling down a long page for more content, you have to keep them interested. A memorable design will do that!

Increasing Conversions

Long Scroll, Animation, and Hover = A Potent Combo

Getting back to the original debate, a long scrolling website will not turn users off, increase your bounce rate, or drop your conversions – but only if its design is solid and has been carefully executed. When that’s the case, bounce rates drop, and conversion rates go up.

Long scrolling offers plenty of opportunities to discover ways to keep users fully engaged. The longer they stay on your site, the more likely they respond to your calls for action.

Managing Lengthy Content

One major challenge is determining the right amount of content to be placed on a page. Too little, and it becomes harder to engage a user, while too much can overwhelm a user, cause a cluttered effect, and be detrimental to the user’s experience.

Long scrolling offers a simple solution. Content can be spread out, thereby allowing a user to assimilate it at their own pace – and without disruptive page-navigation interruptions. This technique is ideal for storytelling, and also for disseminating information that cannot be neatly confined to a conventional web page.

Long-Scrolling Storytelling

Effectively Using Horizontal Nav Bars

Horizontal navigation bars tend to fit nicely onto most page types, but there is a limit to how many internal pages they can accommodate. Dropdown menus are one solution, but they have their own disadvantages as well.

Long scrolling can significantly reduce the need to accommodate multiple internal pages. Instead, the nav bars can guide a user to the main portions of a site’s main page story.

Creating Engaging Websites

Cool Uses of Metaphors

Metaphors are not often thought of as web design elements, but they can provide a great way of keeping a user engaged throughout a lengthy story or explanation. Humans are not comfortable when faced with uncertainty, and this especially applies to website visitors.

Weave a few simple metaphors into your long pages to counteract any feelings of uncertainty. This will prepare your visitors for what they may encounter as they proceed.

Practical Uses of Interactivity

Another design technique users appreciate is strategically placing interactive elements throughout your site’s pages. These interactivities serve to give your users a mental break while at the same time maintaining their interest and keeping them focused and engaged.

This approach is somewhat akin to giving people a chance to get out and stretch their legs during a long road trip. It’s refreshing.

Why Some Users Don’t Like Long-Scrolling

Many users, and especially mobile device users, like long scrolling offers. Some users, however, don’t particularly care for or don’t like it at all. What you need to bear in mind as a designer is that long scrolling can be ideal for some types of websites and ill-suited for others.

Don’t just incorporate this capability because it is trendy; consider the objectives of your site, its limitations, and its overall structure – and then decide.

What’s Next?

Smaller Screens – Longer Scrolling

Small screens and long scrolling go hand in hand. Unless small screens suddenly go out of fashion, which is highly unlikely, long scrolling is probably here to stay.

It is quite likely that, as mobile devices evolve and their functionally improves, long scrolling techniques and functionalities will also evolve and improve – so stay tuned.

Small Screen Parallax Possibilities

Parallax is primarily a desktop effect at present, and it is not yet as mobile-friendly as designers and users would like it to be. Thanks to improvements in Ajax and other auto-loading strategies, this situation is bound to improve.

Parallax is more than an entertaining special effect. When properly used, it can provide a smooth visual narrative that will keep a user engaged.

Long Scrolling & Minimalism – An Outstanding Combination

Long scrolling can be expected to incorporate or act in concert with other trends as it increases in popularity. Take for example the trend toward minimalism. While minimalism and long scrolling do not appear to be particularly related, give a minimalistic site a long-scrolling capability, and you can realize some amazing results.

All of the examples above have been designed with mobile devices in mind. But they work equally well on desktops. Long scrolling techniques really do shine when touch gestures are used, but you can expect designers to find better ways to use these techniques with non-touchscreen applications.

The post The Pros & Cons of Long-Scrolling in Web Design appeared first on Speckyboy Design Magazine.

If you find you’ve been struggling to keep up, listening to podcasts on the subject is an excellent way to stay abreast of the industry without sacrificing all your free time.

Here, we’ve put together a collection of fantastic podcasts aimed squarely at UX designers that you should add to your “to-listen-to” list.

User Defenders Podcast

The User Defenders Podcast features people excelling in the area of UX design. It serves as an outlet for highlighting those people leading in this arena through in-depth interviews and overviews of who these leaders are and how they approach UX design to achieve such success.

Creative Peptalk

Creative Peptalk is a must-listen podcast that touches on UX design regularly due to its focus on the intersection of art and business. Hosted by Andy J. Miller, this podcast combines personal stories with artist interviews to highlight how you can use your art to move forward in your career.

ShopTalk Show

The ShopTalk Show is a podcast hosted by Dave Rupert and Chris Coyier that covers all aspects of UX design, including development, performance, tools, accessibility, and more.

UI Breakfast Podcast

Another podcast to add to your listening list is the UI Breakfast Podcast. This one offers insights from industry professionals about UX, UI, design, development, and everything in between.

99% Invisible

Here’s another podcast you’ll want to check out! 99% Invisible goes all-in on UI and UX discussions. It also covers new products, marketing tactics, and in-depth interviews with industry leaders.

Wireframe

Wireframe goes in-depth on UX design with interviews with designers in every industry and all specialties. It’s hosted by Khoi Vinh, the principal designer at Adobe, and serves to give a human context for design decisions.

What is Wrong with UX

What is Wrong with UX is an intriguingly-titled podcast hosted by Kate and Laura, who go head-to-head in discussions over what makes user experience design fail.

Design Details

The last podcast on our list is Design Details. This podcast is hosted by Marshall Bock and Brian Lovin and is published weekly with interviews and discussions focusing on the design process as well as the culture around design.

UXPodcast

The UXPodcast is published twice a month and focuses primarily on the digital design industry. It also regularly discusses UX technology and industry insights. The podcast has been going since 2011, and episodes are published every other Friday.

High Resolution

High Resolution is another excellent podcast you’ll want to check out. It’s aimed at the design community as a whole, with an emphasis on business. The podcast is actually a limited video series, but it qualifies for our list since it consists of six months worth of weekly guests diving into discussions about how they tackle design projects.

UX & Growth Podcast

Another podcast you should check out is the UX & Growth Podcast. Hosted by Austin Knight, a product designer from Google and a former employee at HubSpot, this podcast focuses on people from other companies who have excelled in UX design and how their efforts impact growth.

Writers in Tech Podcast

Writers in Tech is another compelling podcast that you’ll want to listen to regularly. As its title would suggest, it focuses primarily on UX writing with guests from product teams from all over the world. This podcast serves as support for the UX Writing Hub, which offers articles, workshops, and courses in the UX space.

Listen to Podcasts for UX Designers and Learn

No matter how experienced you are within a given industry, there’s always room to grow. That’s why it’s a good idea to listen to some podcasts made with UX designers in mind.

Not only will you learn something about your industry and about how to do better within it, but you’ll also likely be entertained as well!

The post 10 Fantastic Podcasts for UX Designers appeared first on Speckyboy Design Magazine.