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.

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.

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.

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

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

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

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

Press Play for Hours of Fun

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

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

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

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

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

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

The Challenges of Arcade Game Design

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

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

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

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

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

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

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

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

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

What Do Websites and Video Games Have in Common?

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

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

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

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

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

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

Learn from the Classics

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

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

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

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

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

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

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

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

Modal Windows That Change Your Scroll Position

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

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

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

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

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

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

Requiring Extra Clicks To See Full Content

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

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

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

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

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

Third-party Features That Slow Page Load

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

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

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

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

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

Multimedia That Scrolls With the User

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

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

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

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

Is Your Website Frustrating Users?

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

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

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

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

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

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

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.

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

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

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

How People Perceive Information

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

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

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

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

The Gutenberg Diagram

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

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

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

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

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

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

The F-Pattern

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

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

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

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

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

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

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

The Z-pattern

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

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

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

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

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

The Bottom Line:

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

How to Prevent User Dissatisfaction with Interface Changes

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

A/B Testing

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

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

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

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

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

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

Hallway Testing

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

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

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

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

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

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

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

Five-Second Testing

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

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

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

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

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

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

Wrapping Up

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

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

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

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 Various Cursor States

Before you create some outstanding effects, it’s a good idea to familiarize yourself with the various cursor states. Hover over the examples here and see how the CSS cursor property works. This alone can help improve the usability of clickable elements.

See the Pen Curse Cursors by Zack Hoherchak

Neon Cursor Trails

Perhaps this brightly-colored cursor trail isn’t for every type of website. But in the right setting (say, a portfolio), this effect could provide some high-tech fun. The slick animation and color transitions are sure to grab a user’s attention.

See the Pen ThreeJS Toys – Neon Cursor by Kevin Levron

Spotlight Cursor Text Screen

Cursor effects can go beyond just that little arrow (or dot, in this case) on your screen. Here it adds a spotlight hover effect to some title text. What’s really amazing is the relatively small bits of CSS and JavaScript required to create the presentation.

See the Pen Spotlight Cursor Text Screen by Caroline Artz

Ink Cursor

This effect speaks to the potential of cursors to enhance branding. Imagine this ink splatter cursor being used on a writer’s portfolio or even a print shop. It’s also restrained compared to some of the more outlandish effects out there. This makes it more suitable for business.

See the Pen Ink Cursor by Ricardo Mendieta

Circle Cursor with Blend Mode

Here’s a smart implementation of CSS than enhances usability. By using the blend-mode property, the cursor changes color based on the page content. This can improve the visibility of the element against a variety of backgrounds.

See the Pen Circle cursor with blend mode by Clement Girault

Mouse Cursor Pointing to CTA

Do you really want to draw a user’s attention to a specific area? This snippet features a cursor arrow that rotates to continually point to a call-to-action button. It’s a neat little trick that could be just the thing to spice up a hero area or other important links.

See the Pen Mouse cursor pointing to cta by Aaron Iker

Interactive Custom Cursor

What if a cursor could contextually adapt based on the type of content you’re hovering over? That’s the idea behind this snippet. The pointer is a circle by default. But hover over a link, and it morphs into a rectangular outline. It also “sticks” to the navigational elements in the page header.

See the Pen Interactive Custom Cursor by hb

CursorGeist

Holiday celebrations are a great excuse to use cursor effects. For example, Halloween offers an array of possibilities – like this spooky ghost. It’s festive, yet the translucent color means it won’t distract too much from page content. Also, note how it reacts to the speed of your cursor movements.

See the Pen CursorGeist by Adam Kuhn

Cursor Effects Can Be a Powerful Design Tool

A custom cursor can have as much impact as any trick in a designer’s toolbox. The snippets above have the power to transform a website and create a specific mood.

But as they say, with great power comes great responsibility. And it is quite possible to take a cursor effect too far. That harms usability – not to mention accessibility. Therefore, it’s wise to be judicious about where and how we implement them. Still, the right effect can go a long way.

More CSS Effects Snippets

The post 8 CSS & JavaScript Snippets for Unique Cursor Effects 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.

Effective Use of Negative Space

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

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.

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:

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.

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 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.