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

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

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

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

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

We No Longer Build from Scratch

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

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

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

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

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

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

Adding a Personal Touch to Predesigned Components

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

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

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

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

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

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

Did we even “create” anything here?

Modern Web Design Is a Different Artform

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

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

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

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

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

Find New Ways to Be Creative

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

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

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

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

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

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

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.

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 Unique Cursor Effects 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.

However, designers tend to overlook one crucial element in favor of logic, statistics, and everything our rational mind can cook up. It is the one thing that user experience designer Aaron Walter described as “the lingua franca of humanity”: Emotions.

Why Emotional Websites Work

Consider how cigarette packs are designed with graphic images of diseases caused by smoking; how a humorous commercial that went viral on social media increases awareness of a cause; or how sex sells in pop songs.

The same concept applies to web design.

Emotional web design deliberately affects the feelings of site visitors through the colors, fonts, call-to-action buttons, even down to the last image and words used in the body text.

Appealing to your users’ emotions work because it:

• Shows that there is a human being behind the website. Visitors would feel that they are not talking to machines; rather, human beings they can relate to and actually converse with.
• Puts human beings front and center. A website designed for emotions are more human-centric, as opposed to a website made for search engines algorithms or any other site metric. It goes back to the core of UX – that is, to build a website to ultimately benefit the user.
• Helps customers be reminded of you. When done right, an emotional web design leaves a longer lasting imprint in the memories of visitors. A memorable image that, for instance, they were able to emotionally connect with would make them stay on your website more. The more time they spend on your site, the more they lose interest in competitors.
• Influences decision making. Some of the most powerful advertisements appeal to emotions. They work because they tap into the desire or fear of a customer that would ultimately make them decide to buy. Numerous studies have been conducted establishing how emotions affect buying behavior, be it online or offline.
• Establishes relationships with customers. Connecting with customers is the Holy Grail of marketing campaigns, as this is the first step towards building a relationship and ultimately forming trust in a brand. The key to connecting is knowing which emotion a website needs to trigger and how to execute it properly.

Understanding what compels human behavior and translating that abstract idea into specific elements of a website will vastly improve user engagement.

As UX designers, emotion-based websites means giving visitors more impetus to follow the journey you have laid out for them – whether it is to sign up for a newsletter, to become more aware of a brand, or to purchase a product or service.

Fundamental Elements Of An Emotion-based Website

Much like building any edifice, creating an emotionally-infused website requires a strong foundation. These are the elements to take note of:

Know Your Audience

While designing with metrics in consideration are important, numbers are not the crux of emotional websites. Simply put, user experience is about the user, not the algorithm. Think of them as human beings, not as a numbers on the site visitor counter.

To do that, find out information about general details like age, sex, country, and line of work to get a clear image of who the website is for.

Connecting on an emotional level, however, entails more than demographics. Find out who they are. What are their goals? How will they interact with your website? What are the things that they consider important? What problems do they have?

It’s vital to get to know your audience and ultimately what they feel, in order to deliver the site’s message properly. A service page, for instance, needs to communicate the feeling that you understand and are able to provide solutions to the customers’ problems.

Trigger the Right Emotion

Set your goals at the beginning. What would you like your users to feel upon visiting your website?

One of the common mistakes of designers is to target multiple emotions within the website. The trick here is to focus on just one emotion.

Is it joy, surprise, pleasure, anticipation, calm? Pick one and work your way towards achieving that one emotion, from your images, to colors, to the text, and overall tone of the website.

Use The Right Image

Visual content continues to be one of the most powerful tools in online marketing. In fact, colored visuals would compel your reader to read your content by as much as 80%.

However, if you wish to emotionally connect with your audience, you can’t use randomly Googled photos or stock images. The key here is to provide relevant and relatable photos to engage site users. Relevant images paired with content gets 94% more views than content without any relevant images.

Keep in mind that if the images you chose do not complement your message, it will cause confusion to your users which could then result in your losing credibility.

Use Appropriate Color Combinations

Color psychology looks at how different colors sway human behavior. It works powerfully on a subconscious level that a change in hue can impact the way your website is perceived, be it positively or negatively.

Which colors you choose depends largely on the emotion you want to evoke. For example, blue and green are safe, go-to colors when designing websites. However, different shades would connote different emotions.

Light and dark blue are calming colors, but go to darker shades of blue and you will evoke emotions of security and strength. Red signifies passion, green for health and wealth, black for formality, purple for elegance and femininity. Men and women would also differ in their color preference.

Always keep your target audience in mind-who they are, what they want, what are their goals-so you can pick the colors that would lead them to conversions.

Write Compelling Words

Writing is more than just stringing together words and phrases that sound edgy or is a close synonym of the emotion that you want to evoke.

There is an art and a science involved in writing compelling copy, especially for websites that want to connect with emotions. The tagline or header title, for instance, can immediately set the entire personality of the website.

Moreover, it’s important to use the proper tone of voice. Should you be professional? Should you be empathetic? Or is your target audience receptive to witty and funny lines?

When creating a website that appeals to emotions, you need to make sure that every element is intentional. Words, images, colors-these should all blend into one coherent design that would ultimately evoke the right kind of emotion to your target audience.

At the end of the day, a good emotion-infused website grabs the user’s attention, guides them into interacting with your website, is visually appealing, and leaves a long-lasting imprint on their memories.

The post Improve UX by Understanding What Compels Human Behavior appeared first on Speckyboy Design Magazine.

As there are many onboarding solutions available, to make things easier for you, we have prepared this collection of onboarding CSS and JavaScript code snippets. While they are not all teeming with artistic charm and extravagant illustrations, they will all give you a solid base for creating your own user-friendly onboarding UI.

Beautiful Onboarding UI

Our first code example is an eye-pleasing onboarding solution that uses beautiful graphics and user-friendly animation. It is based on a conventional horizontal slider that offers the universally known three dots for navigation.

It has three screens, but you can easily increase that number to however many your project requires. Use this snippet if you would like to make your onboarding unobtrusive.

See the Pen DailyUI – #023 Onboarding by Fabio Ottaviani

Onboarding Slides with jQuery

While the previous example takes a more traditional route to onboarding, this snippet makes use of a split layout, offering a carefully organized UI for displaying information that allows you to separate the visual content from the textual

Along with the classic dot-based navigation, there are also supporting “Next” and “Back” buttons for those who prefer traditional controls.

See the Pen Onboarding slides with jquery by Hainer Savimaa

Simple Onboarding

This minimally designed onboarding snippet manages to accommodate all of the necessary information in one tiny screen while still providing a comfortable user experience.

As for the navigation, it may feel a little unfinished since there is no back button, but you could easily add that in yourself. On the whole, this code snippet could serve as a great foundation for your own onboarding UI.

See the Pen Onboarding by Nahom Ebssa

Minimal Onboarding UI

Inspired by the outstanding onboarding screens created by Ennio Dybeli, this onboarding snippet, with its minimal design and smoothly animated behavior, isn’t anything ground-breaking in concept.

The details are standard, and the transitions are basic, yet they work together perfectly. The concept is simple yet straight-to-the-point. It is ideal for use on smaller projects.

See the Pen Onboarding by Fersho Pls

Split-Screen Onboarding Carousel

We have already featured a split-screen layout, but this time, the onboarding UI has been rotated ninety degrees and transformed into a traditional stripe layout – looking pretty much like a basic slider from a few years ago.

Beyond that, it has the potential to cover all of the onboarding information that you need to deliver to users. Even though it has a relatively wide layout, you could quickly make it responsive.

See the Pen Onboarding Carousel by Dario Corsi

Classic Onboarding UI

This snippet is not the kind of thing that wins over users with beautiful aesthetics or extraordinary animation. Rather, it serves as a base for your own onboarding creations. It does not have a particularly fancy design – just a classic structure.

Unlike the previous snippets, this component comes with short lines instead of dots and standard arrows for navigation instead of the words “Next” and “Back,” but the result still feels intuitive.

See the Pen Onboarding by Nick Wanninger

Android App Onboarding

This onboarding UI may look dated, but it does its job perfectly well. It comes in two parts. The first shows four standard carousel screens that can be used to offer visitors more information, and the second includes an email subscription form for those who want to get straight to the point by pushing the “Get Started” button.

See the Pen Android App Onboarding by Mat Swainson

Open-Source Liquid Swipe

We have looked at solutions that provide a base technique for showing a series of screenshots or animations in a row.

Liquid Swipe is a bit different. It is centered around a transition effect that perfectly imitates a liquid swipe behavior that feels incredibly natural. You can download the files from its GitHub repo.

Conclusion

In essence, an onboarding UI can be created using a basic carousel system. All you need to do is divide each slide into two parts.

One for content, and the other for navigation. After that, you can add your own creative flair and transition effects to make the user experience not just informative but enjoyable as well.

The post 8 CSS & JavaScript Snippets for Creating Onboarding Carousels appeared first on Speckyboy Design Magazine.

When you shop online, there’s very little effort involved in anything you do, including abandoning your cart. Simply close the tab, and that’s it. When you’re on the other side of the cart, however, it means that all that effort and time you spent to get them to that point is flushed down the drain.

Some Shocking Statistics

The fact is shopping cart abandonment is the most difficult roadblock for online retailers to get past. According to the digital marketing platform Listrak, an average of 81% of shopping carts are abandoned. Others report the number as 73% for desktop users, on tablet 80%, and 85% on mobile.

This article reports that 68% of all eCommerce sales were via a mobile device, which means that the percentage would be even higher if more mobile users actually went all the way to checkout.

Think about those numbers for a second. At best, it means that for almost every seven people out of ten that shop on your online store do not go through with the purchase. It’s enough to make you weep, isn’t it?

Of course, that is the average, which means there are retailers that get much better results than others do, and your goal is to be on the winning team. To do that, you should learn from the mistakes of others before you also become part of a sad statistic.

These proven tactics can help you avoid shopping cart abandonment on your eCommerce site as much as possible,

Use Familiar Trust Signals in Your Transaction Form

Remember that song “Trust In Me” from the Jungle Book, where the treacherous python Kaa tries to lure Mowgli into his coils? That is essentially what you are doing with a transaction form without familiar trust signals. You’re telling your buyers to trust you blindly with sensitive personal and financial information.

That’s fine if they do, but unfortunately for you, 61% of shoppers say they will abandon their cart because there were no security logos, and 75% will do the same because they didn’t recognize the trust signal you put on your trust form. Surrender to the inevitable; place a recognizable security logo on your transaction form.

Be Upfront About Added Costs

Your promotion or sales pitch was successful, and you get your shoppers to click on the ‘Buy Now’ button. Lo and behold, you hit them with shipping costs and other fees, and they abandon the cart. A whopping 44% will not go through with a purchase when they perceive the shipping and handling costs to be too high.

More importantly, unexpected shipping costs at checkout is the number one reason for shopping cart abandonment. Shoppers don’t like nasty surprises.

If you can’t afford free shipping, then at least be upfront about it. Let your customers know how much they should expect to pay before they add the item to the cart. If they add it to the cart anyway, they are less likely to abandon it.

Go for Free Shipping

According to a report from UPS, 38% of shoppers state that they have purchased from a site because of a shipping offer, and 39% are willing to purchase enough to qualify for free shipping.

It is obvious that going for free shipping for your eCommerce site is a great way to get people to go complete the checkout process, so it is worth considering.

If you will incur considerable costs to offer free shipping, crunch the numbers so that your customers will buy enough to make it worth your while. It works for Amazon, why not you?

Have a Retargeting Strategy

While your goal is to have 0% shopping cart abandonment, that just isn’t going to happen. There will always be people that will abandon their carts even if you do everything right.

The good news is about 72% of people that abandon their carts have some intention of coming back. Your best reaction is to retarget those customers by sending them an email reminding them that they haven’t completed their purchase and maybe offering them a freebie or other incentive.

Have a Cart Icon Visible at All Times

Sometimes, people abandon their carts because they were distracted by a burning smell in the kitchen or they had to go to a meeting.

It is important to remind them about it the next time they visit your site by having a cart icon clearly visible that displays the number of unbought items, or they’ll simply forget.

Make It Easy for Them to Buy More

Shopping navigation has to be a seamless experience to encourage people to buy more. If they click on a product, which brings them to the cart, you should have buttons on that window that allows them to “Continue Shopping” or “Proceed to Checkout.”

If you make it hard for them to get back to the product pages, you might frustrate them, leading to just the one purchase, or worse, cart abandonment.

Offer Several Payment Options

Online shopping is convenient in many ways, but it has its downside. One of them is the availability of the preferred payment method. Some people prefer PayPal or similar, others want to pay with a credit card, while still others prefer mobile payment systems like Apple Pay.

If you don’t offer the payment option they want, they will go elsewhere. Sure, it’s a hassle, but you want their money, so make an effort to give them what they want. Have as many payment options as you can manage to capture more sales.

Accommodate Guests

Registering an account to buy a $2 item is a pain, and most people simply won’t bother. Don’t force your buyers to create an account to buy. You can make account creation optional, so it is easy for them to make a purchase anonymously through a guest checkout.

Maybe later on, when they are regular customers, they won’t mind doing so, especially if you offer them an incentive to do so, such as a discount code for their next purchase.

Streamline the Checkout Process

If you are playing an online game, going through several stages to get to the Big Boss is a good idea. Not so much when you’re trying to sell something. For that, you want the checkout process to be ridiculously fast and effortless.

Reduce the number of pages your customer has to go through to get to the checkout to as few as possible. Remember that each click they have to make increases the chances of abandonment, so keep the count low.

Activate Exit Pop-up Reminders

You’ve probably seen these several times when you’re about to leave a site. A window pops up that asks you if you’re sure you want to leave the page.

On eCommerce sites, these pop-up windows usually come with some incentive for you to keep on browsing, such as a reminder that you still have items in your cart or a discount offer for concluding the purchase. It is very effective, and easy to implement

Offer Them Their Money Back

Finally, convince the fence-sitters to take the plunge by offering them a no-questions-asked money back guarantee. It reassures the customer that if they change their mind later on, or they’re not satisfied with the product or service, they don’t risk anything by giving it a try now.

It also makes them trust your site more, because you stand by your product or service.

Don’t be under any illusions; you will still have some cart abandonment on your site. However, if you follow the foregoing suggestions, you reduce the risk considerably. Any decrease in your cart abandonment is well worth the effort in the long run.

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