achieving-better-engagement-through-ux-?-the-secret-to-gamification

Gamification has become a popular tactic in web design since it first burst onto the digital scene over 10 years ago. It’s everywhere you look, both on- and off-screen, and nobody is denying that it can do wonders for conversions – but what about the wider impact of gamification on business and technology? 

What Is Gamification? 

First of all, let’s take a look at what gamification actually is. 

Gamification is where you take something that already exists, such as a website, and add game mechanics to make it more engaging. 

Game mechanics are simply techniques used by game designers to engage players – in gamification, you take these methods and apply them to things that aren’t games. Why? Because this way, you can increase engagement, motivation, and even loyalty. 

Think about achievement badges, loyalty rewards, leaderboards, and progress bars; these are all examples of gamification. 

There are two types of gamification: structural gamification, and content gamification. 

Structural gamification is where you introduce game elements to the structure of your website. This could be in the form of a progress bar, collecting badges, or creating leaderboards. 

Here, you can see a great example of structural gamification from the learning site Memrise. Users can see how many points they’ve scored, what level of learning they’re at, view learning streaks, and track how many new words they’ve learned. 

Content gamification is where you apply game mechanics directly to your site’s content. The trick to this is simply using gamification to enhance the content – for example, you can employ storytelling, characters, and challenges to make the content more engaging. 

A company that’s well-known for its use of content gamification is Compare the Market, which created a series of meerkat characters to enhance its website and encourage interaction with its product – these characters now lie at the very heart of the brand. 

It’s important to note that you’re not actually turning your website into a game itself. You’re just adding game-like elements for your users to interact with. 

Gamification: Hiding In Plain Sight

The word gamification was first coined by Nick Pelling back in 2003, but it actually began centuries before, back in the 1800s.  Despite its popularity in the digital world, the term was in use even before screens ever existed!

Historically, gamification has been used by businesses aiming to reward loyal customers, workplaces trying to engage their employees, and educators finding new ways to teach students. 

Gamification surrounds us in our everyday lives, from frequent flyer programs to customer loyalty cards promising free coffee. We all fall under the spell of gamification without ever knowing its name.

Supermarkets make use of gamification to huge effect – nearly everyone has some kind of points card that they scan every time they go shopping. The points add up to discounts on products, fuel, and can even pay for air miles. This rewards customers for their loyalty and, even more importantly, keeps them coming back time and time again.  

One of the reasons this method is so effective is that people love competition, and to be rewarded for things – as long as they don’t have to put in too much effort. It’s this love of winning and succeeding that makes gamification so successful when it comes to conversions, both online and offline. 

Online ecommerce giant Amazon makes full use of this fact to turn customer reviews into a rewarding and competitive activity – locking in engagement from users and promoting product quality control in one move. 

Frequent and well-rated reviewers can become a “Top Reviewer” and even make it into the “Hall of Fame” list. Top reviewers receive badges, tons of free products and discounts from sellers looking for trusted reviews, as well as free Amazon gift cards. 

This example of gamification takes something people do anyway – leaving reviews of products – and adds extra incentive to engage with Amazon’s marketplace.  

To succeed online, gamification first needs to be easy to use, clearly laid out, and attractive to users. That’s why web designers and developers are in an excellent position to revamp their projects with gamification in mind. 

Gamification also needs to bring real benefits to your users. 

Think about what makes your users tick. Would a points system work on your site? Could a leaderboard motivate your visitors? Are you in a position to offer rewards to successful users? Whatever you do, always make your gamification relevant and rewarding. 

To Conversions… And Beyond

It’s already been established that gamification can do wonders for conversions. But why stop there?  

For starters, gamification could be extremely beneficial to your website’s search engine optimization (SEO)

Gamification is known to increase engagement, improve customer loyalty, and boost time on page. It can also increase traffic, such as the case of sharedserviceslink, which increased website visits by 108.5% using a gamified strategy based around a game called “Kill The Paper Invoice.” 

These factors are all things that Google loves. And while many of Google’s ranking factors are educated guesses, we do know that dwell time is a major player in the race for rankings. 

Dwell time is how long a user spends looking at a page after clicking through from the search engine results page (SERP). 

Basic SEO tells us that the longer your users spend on your pages, the better your site looks to Google. And what does gamification do? It encourages users not just to click on your site, but to stick on it too. 

This is where your web design skills are essential for creating top notch gamification, giving you an edge over competitors. Your ultimate goal is for the user to click on your site on the results page, and then not return to Google. 

This is called a long click, and has a direct impact on rankings – in short, it shows Google that your site has satisfied the searcher!

By creating highly engaging site content, gamification naturally gets visitors to spend longer on your site. This is fantastic for SEO, and can result in your site ranking higher up in Google’s search results.

An interesting example of this is a test carried out on Twitter by Rand Fishkin, founder of SEO company Moz

He got his followers to Google the term “best grilled steak” and click the top search result, but immediately return to the Google results page. They then clicked the fourth result and stayed on that page without returning to Google. 

This is an example of “bouncing” straight off the top result, and a long click on the fourth result. 

So, what happened? Well, the fourth result quickly climbed to the first position on the results page, after 70 minutes and between 400 and 500 interactions. Although simply an experiment, this strongly suggests that dwell time can positively affect your site’s ranking on Google. 

But why does it matter if gamification can affect Google rankings? 

Higher ranking means more traffic, which leads to more conversions and better awareness of your site. 

It all adds up – but is there any proof gamification can help with increasing user engagement and improving traffic?

Success Stories 

Bunchball, a gamification platform, helped an online learning tools website called Course Hero gamify its site. They implemented reward badges, created a points system, and structured the learning into levels for students to progress through.

The top 20 participants were then displayed on a public leaderboard, tapping into the competitive element of gamification. Students could also share their successes, badges, and progress across social channels Twitter and Facebook. 

Users can unlock free access by uploading resources, reviewing content, and referring Course Hero to friends.  

The results saw that overall, time on site increased by 5%, and social sharing increased by a whopping 400% in three months, proving that gamification is no one trick pony. 

Another more well-known example is from M&M, which launched a gamified social media campaign designed around finding a tiny pretzel in a large graphic full of M&M’s. All people had to do was find the hidden pretzel – there was no reward, so this marketing strategy was purely to encourage engagement with the brand. 

And it succeeded – although extremely simple and inexpensive, the campaign resulted in 25,000 new Facebook likes, 10,000 comments, and 6,000 shares. This proves your approach doesn’t have to be complicated or pricey to be effective. 

The apparent relationship here between gamification and engagement is a very positive one. And with everything we know about the effect that low bounce rate and increased dwell time can have on Google rankings, gamification certainly looks like the final key to unlocking your website’s success. 

How Can You Achieve Gamification Through Web Design? 

When thinking about how to implement gamification through web design, you should start with your user. What are their needs, pain points, and motivations? What action do you want them to take? Gamification needs to be simple, easy, and rewarding, so don’t over complicate your design. 

Understanding what drives your users will help you gamify your site in the best way possible – here are various techniques you can implement. 

Loss Aversion 

Nobody likes to feel as though they’re missing out. Give your users something for free straight away, and you’ll find that they become unwilling to give it up. This can lead to more premium sign-ups, or better engagement if you create a “use it or lose it” kind of system. 

Popular examples include “freemium” plans that limit users’ resources, used by most website builders like Wix, as well as games such as The Sims and learning programs such as DuoLingo. These all provide the user with something for free, but still gain hundreds of paying customers because users don’t want to lose their progress. 

The Sims is a great example of using loss aversion to keep users engaged. People keep playing because if they don’t, their characters start to deteriorate and lose happiness, affecting the player’s score. 

This example is from an actual game platform, but you can use the same principle to hook your own users – and it doesn’t have to involve paid conversions. DuoLingo lets you start learning and measuring your success for free, but you need to create a profile to keep your progress, which is an effective way of encouraging sign ups. 

Rewards

Who doesn’t love winning? Get creative with the ways you can reward your users. Give them bonuses for filling out forms, sharing on social media, or completing purchases. These bonuses could be points, badges, or virtual money, which users can collect to unlock prizes or levels. 

Dropbox is a classic example of this tactic – the free version has a limited amount of storage, but users can earn more free storage space by completing tasks such as referring friends, adding to the community forum, and more. 

You can play with this by rewarding users with more resources for carrying out actions on your own website. Make the reward relevant to your site, whether that’s giving them access to exclusive content, freebies, or virtual prizes. 

Competition

Humans are naturally competitive. Tap into your users’ need to compete by creating leaderboards, and letting them build profiles with levels of authority, achievement, or reputation. Set goals and levels for them to unlock, and watch your users race each other to the top – just like our earlier example of the top Amazon reviewers! 

Other examples include sites like TripAdvisor, AirBnB, and social media platforms like Facebook and LinkedIn where people “compete” to get more likes and shares than others. A popular example is Reddit, where users receive points, and comments can be upvoted or downvoted by others. 

Creating an interactive and competitive audience can really boost engagement in your site’s content, especially if you can incorporate a rewards system alongside to motivate your users. 

Feedback

Always let your users know what effect their actions are having. Let them keep track of their progress, and show them how many points they’re collecting – instant gratification is often the key to making your users want more. 

DuoLingo, the language learning tool, makes full use of this, giving you instant updates on your progress as you work your way through its courses. This encourages the user to continue through the lesson and acts as a visual motivator. 

At the end of the course the user receives a round-up of their progress, which promotes regular use so they can maintain their “streak”. You can apply this to your own site by confirming actions such as form completions or social sharing. 

Even a simple, big green tick is a positive booster, and watching points or progress bars go up makes users more likely to stick with their actions. 

Don’t keep your users in suspense – if they can directly track the results of their actions on your site, they’re more likely to keep coming back for more!

By tapping into these psychological tactics, you can attract attention, and keep it. Whatever strategy you choose, you must always make sure your gamification is ticking the following boxes: 

  • It must be easy for the user to carry out
  • It must offer relevant and real rewards for the user
  • It must provide clear actions for the user to take

Conclusion

Gamification has the power to boost your site’s engagement, traffic, conversions, and more. But without great UX, it won’t succeed – we’ve seen how gamification needs to be clear, simple, and easy to use to keep people coming back for more time and time again. 

Remember, it’s not about creating games to distract from your content – instead, you should gamify your site to enhance your content and hook your users. 

Using the tactics we’ve outlined – competition, rewards, loss aversion, and feedback – you can design a successful gamification strategy, whether you want to increase conversions or simply boost loyalty and engagement in the long-term. 

Want to learn more?

Want to get an industry-recognized Course Certificate in UX Design, Design Thinking, UI Design, or another related design topic? Online UX courses from the Interaction Design Foundation can provide you with industry-relevant skills to advance your UX career. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research – Methods and Best Practices are some of the most popular courses. Good luck on your learning journey!

how-to-design-better-buttons

A button is an interactive element that results in the action described on it. If it says “save” on a button, clicking it will most likely “save” something. It’s also one of the most important interactive elements of any digital product.

It can lead to a purchase, download, send, among other important actions. Digital buttons are also descendants from real-world buttons, like on a TV remote, record player, or game controller.

The most important thing to know is a button should look like a button, and the most important rule for designing a button is to make it stand out enough so it won’t be confused with anything else.

By removing elements from a button it’s function starts to dissolve and disappear. It becomes decoration or text, losing its actionable qualities.

Familiar = good

We are used to certain shapes and forms that are normally associated with an action. The more our button looks similar to what we associate with buttons, the better. This is why a rectangle (or a rounded rectangle) is always the safest choice for a button.

This element will be immediately identified as a button.

Other shapes and forms (triangle, circle, organic) are not as recognizable to the user. Proceed with caution, and use them only when the general style of your product requires deviating from the norms.

Elements that can take much longer to be identified as being actionable.

Button dissection

While designing buttons think about each element and choose wisely. Using the company in question’s brand or style guide as a baseline, think about what kind of buttons will match the brand and fit well within the interface.

You should set the padding and safe space using grid base numbers. In the above example, the left inner spacing is twice as big, as the vertical spacing, which is a safe ratio choice for increased readability.

Spacing and alignment

Unevenly spaced buttons are one of the most common problems of interfaces. Double-check if your button labels are centered both horizontally and vertically. Create guides if you need to be sure.

Aside from grid-based methods, a safe way of choosing button spacing can also be done with the uppercase “W.” If at least one “W” fits on each side of the button label, you’re safe. On the sides, it’s even better to use double the “W” rule for increased readability.

Don’t forget about the safe space of, or space in between, your buttons. If you have a group of them, the safe space should be individual for each one — don’t overlap it!

The right size

Both web and mobile buttons should also have the right minimum size. If your buttons are too small, it will be difficult to tap or click on them. That results in frustration and can lead to users uninstalling your app. The best way is to start with 44 x 44 pixels for all interactive elements on mobile devices.

The sweet spot is somewhere around 50 pixels for mobile buttons. In the case of cursor-based devices, 32x 32 pixels should also work. Remember that even on desktops, the larger the button the easier it is to use

Good practices

Important buttons also work well with icons. A checkout is quickly identified by a basket or a cart icon, but only as long as the word “checkout” also appears.

A right arrow or chevron placed after the button label makes the resulting message stronger. The user is more compelled to click and “proceed.” This works well if you’d like to strengthen your CTA.

Buttons with shadows are also more “clickable” and noticed much faster than flat ones. Add a subtle drop shadow in the button to make it stand out from the background more.

Rounded corners

Rounded buttons are considered more friendly and positive than sharp edges. At the same time, they make it a lot harder to design content around them. If you have left-aligned text just above the button, the more rounded the corner the less that text will visually fit — it’ll make you feel as if the left margin is in two places at the same time.

Aligning icons

Good icon alignment on buttons is one of the hardest things to do. In many cases the relation between font-weight and icon-weight is specific to them. There is however a simple and useful rule that works in most cases.

Depending on our corner radius, we create a circle or a square the size of the height of our button. Inside it, we create another shape to house the icon. It should have a padding inside the larger shape which is the same size as our text height. Then we place our icon inside the smaller shape.

In the case of a chevron, it’s best for it to be text-height. You can also check the line-width against the font width — the more closely matched the better the end result.

Edge balancing

If you’re using rounded buttons, keep in mind to have the same rounded corner ratios as other onscreen elements, otherwise, there will be imbalances in the margins.

The diagonal spacing is the same here as the one on the left side and the bottom. This results in a much nicer, faster to process outer edge.
The diagonal spacing is larger (left) and smaller (right) than the side spacing. That makes the edge stand out too much and take the attention away from the button itself.

Summary

When you start building out your primary, secondary, and tertiary buttons, try to remember to check them against a couple of factors every time. Even small inconsistencies or bad alignments can lead to lower conversion. When it comes to buttons, conversions and clicks are all that matter.

In summary, remember to:

  • Make your button look like a button
  • Have the label centered both vertically and horizontally
  • Have enough space (padding) inside the button
  • If you’re using an icon choose the right size and alignment
  • Set your border radius depending on where the button will be used
  • And then check if that radius matches your other on-screen elements
  • Make it the right size! The bigger the button the easier it is to use. That includes desktops!

Good luck!

This article was originally published on UX Collective by Michal Malewicz, a designer with over 20 years of experience in building digital products. CEO of the HYPE4 agency and author of the “Designing Interfaces” book.

Read next:

Hackers steal $480,000 worth of NULS cryptocurrency from its dev team

6-steps-for-a-better-product-design-workflow

Nicolas Ferney

Generally speaking, because of time-constraints, lo-fi and hi-fi comps are the most recurring deliverables during the product design process but no -or very few- interactions are detailed or designed.

Then, the rest of the story could go like this: Prototypes are quickly built (using the highly desirable and sexy Hi-Fi comps) because Stakeholders want to see «the final result» and «cannot project themselves without the sketch file».

But eventually, the team members take a step back and imagine another solution, so the designer goes back into sketch, spends two hours modifying the latest version… and so on and so forth.

For sure. This solution has the advantage to give a final overview of the look and feel of the user interface. But it is far from ideal if the team wants to streamline the work and gain in speed and efficiency.

Moreover, designers generally hate updating the Hi-Fi screens with heavy structural changes as every modification needs to be carefully crafted, every screen needs to show the final consistency (font, colour, balance, spacing, contrast, structure, hierarchy, etc) before being re-uploaded into InVision and be ready for approval.

Let’s face it. This process is time-consuming and quite exhausting for everyone, and yes. Specifically… for product designers.


The workflow I’m about to describe ticks many boxes:

✅ Engaging the whole team in the design process;

✅ Keeping track of the interactions between screens;

✅ Ensuring better communication within the team and specifically towards software engineering;

✅ Layering different renderings of the user experience;

✅ Giving the opportunity to observe the design solution under many angles/approaches and securing the best experience possible;

✅ Crafting an improved and well thought-through experience before final delivery.

Here are the 6 steps (and types of deliverables) that are recommended before considering that the team has reached a satisfying product design solution.


In principle: This first step allows the team to design a solution as a whole entity and reduce the amount of back and forth between product ownership, users and designers.

Following an agenda and precise timing (20 minutes for sketching, 2 minutes for presenting, etc), the group is spread across multiple micro-teams (2 people minimum) and tries to have a multi-disciplinary approach to problem solving by sketching solutions using pens and paper.

Photo by picjumbo.com from Pexels

The output: Several screens can be produced if necessary. The participants have to really focus on the interactions and the flow. The look and feel is secondary and needs to be roughly sketched, nothing more.

Following this framework, the team members and the users are the designers, the UX practitioners are to be considered as facilitators. It’s sometimes challenging for designers that are new to UX practises because they no longer are at the origin of the design decisions. But hey, fellow designers get yourself a cup of coffee and let these people work for you, they’re smarter than you think.

Put it more simply: Some people in the team have brand new designing powers, others (managers, designers) just need to let go and become facilitators. But in the end, everybody wins.


In principle: This flow represents a high level view of the actions that your user is going to take in order to achieve a very specific task. The user flow replaces and/or complement any written documentation by showing a very simple and logical path. This visual representation is really useful as it allows the team to take a step back and turn some specs (or a user story) into a very simple and yet exhaustive representation.

The output: This step can come before, during or after the co-design session to clarify a scenario or a use case. Just make sure this deliverable is built with the participation of the team. I personally always start with a white board session in presence of fellow designers and/or product owners, software engineers… then I switch to a clean digital version using Axure RP.

Photo by Christina Morillo

Put it more simply: The user flow gives an overview of how the story is going to be told on screen. I strongly recommend UXers to not skip this step. 🙅🏻‍♂️


In principle: This relatively recent technique allows the UXers to communicate more thoroughly with the software engineering team. It’s particularly suitable for complex digital products embedding lots of interactions. I personally love this deliverable more than any other one because it encompasses many tools and deliverables in one without sucking too much of the designer’s precious time.

The output: the user flow generally works with a simplified version of the wireframes and gives a visual representation of all the interactions between the screens and the various components within the page. No need to detail the whole content here, but some notes can help the team to understand this deliverable better. The content really needs to be roughly represented on screen. Nothing too fancy, let’s keep this quick and elegant.

Wireflows are particularly suitable for complex applications and generally include a really small level of copy. This useful and free set of wireflow components for Sketch was designed and shared by Marcelo Pérez.

Put it more simply: wireflows give a more precise idea on the decor of the story – the presence and positioning of the components in the interface and the output given when these components are triggered. More details here.


In principle: Once the wireflow has been defined and has allowed the team to get a clearer vision, we need to put the actual content in wireframes to start building a lo-fi prototype.

The benefits of building a lo-fi prototype are numerous. In a nutshell, the lo-fi prototype emulates the reality of what the user will experiment with the hi-fi prototype. The huge benefit being that it’s much faster to produce and can allow the team to have a demo-able product in a few hours.

The output: The html files generated in Axure, for instance, can be shared in a matter of seconds and allow the team to play with an interface while consuming the whole content.

This step is crucial especially if the team needs to be immersed in an emulated environment before pivoting or taking decisions that could have a strong impact on the overall design. If this step is neglected and the team chooses to jump straight into hi-fi prototyping, it would actually be too overwhelming and require too much time to redesign the final comps each and every time.

Put it more simply: The equivalent of a rough/animated storyboard for a film or anime. Huge time saver. Great tool to effortlessly get an overview of the final feature. Helps to streamline the efforts and structure the design process before jumping into final rendering/ fancy eye candy stuff.


In principle: This step is necessary to give the final look of the digital product. Its goal is to craft the user interface that will solve the user problem and generate a desired output. It’s generally built using specific grids and a design system.

The output: The final comps are to be produced in a specific software like Sketch, Figma or Adobe Xd, then uploaded to InVision for usability testing and Zeplin for sharing the resource with the developers/ software engineering teams.

A simple and clean UI for a an app concept that compares interest over the years for various loans. Sketch Freebie by Lorenzo Perniciaro

Put it more simply: everybody liked the studies and the rough sketches, now we’re going to paint a beautiful (and very usable) picture.


In Principle: The final step before iteration is the evaluation of the new feature that was built during the sprint.

The output: Many techniques do exist and the team should not limit their choices: Usability tests, heuristic evaluation, usability scales, cognitive walkthrough, etc. There’s literally hundreds of user experience research methods and the job of the product designer is to pick the one that’s more adapted to the context.

Photo by Fauxel

Put it more simply: This step is crucial, especially if KPIs have been set. The team should always rely on the evaluation to iterate and verify their initial assumption when they took a design decision. Even if users were present during the co-design session.


We’ve seen that the team should first draft the broad lines of a feature with pen and paper, crafting the experience together. The designer’s job is to take the next steps and create the various views that will progressively zoom in on the final result.

Imagine being on Google Earth and zooming progressively on a continent, a country, a city, a block of houses, to reveal an environment that we’d like to visit virtually (yeah we’ve all done that circa 2006)…

Photo by Pixabay

Let’s consider here that the higher view is the User flow. If we zoom in, we reveal the wireflow and a bit more details on the interface and the interactions, If we still zoom in, the wireframe appears and it’s embedded in a prototype. Let’s zoom one last time and we see colour, contrast, hierarchy and accessibility features appearing. Our final product is revealed step by step progressively instead of tele-transporting us directly into this new environment.

What’s the advantage to this? Well. It breaks down the design process into many quick steps that will allow the team to take a step back on the design solution for each and every output created.

Flows, wireframes, lo-fi prototypes must be scrutinized by the team in a limited time frame to allow the product design team to bring the necessary modifications before jumping into the fancy hi-fi comps.


It is the designer’s responsibility to provide the team with the needed deliverable(s). It is the designer’s choice to structure his•her approach to product design.

There’s also a time constraint consideration here, and this is not always challengeable. Yet this type of decision is crucial and it will greatly impact the quality of the final product.

This succession of steps is a set of recommendations and best practises. It is non exhaustive. Countless deliverables can become handy when designing a product: Personas, empathy map, user journey, scenarios, storyboarding… specifically during the user research/discovery phase. The team needs to be aware that generally speaking, directly jumping into a co-design session without these could also be risky. Good design takes time. The designer should take the time to have these deliverables ready. Producing too much material will never be a bad option. Producing too few can on the other hand, become dangerous.

If the team is comfortable jumping straight into hi-fi, it could be fine, and it could work… but problems could also occur after a couple of sprints.

Because in the end, having the designer left alone to deal with heavy iterations for long periods of time is toxic not only for her•him, but for the entire team.

Ideally, the team needs to come up with its own design strategy to optimize this whole process. A strategy that is robust, durable, adapted to the team’s needs and most importantly beneficial for the end user.

why-css-hsl-colors-are-better!

With the Power of CSS Variables

Elad Shechter

Introduction

One of the most fundamental concepts in CSS is colors. It’s a basic concept everywhere, but in this article, we’ll be focusing on its representation when targeting browsers.

On the web, every color is a combination of 3 colors: red, green, and blue. It’s as if every pixel on the screen consists of three light-bulbs: green, blue, and red. The most common method for representing colors in CSS is the “Hexadecimal colors” method, and the next common method is the RGB/RGBA one. The two approaches differ in the way they represent the values of those colors.

pixels view from close look

The hexadecimal colors method— each of the three colors is represented using a double-digit HEX number, and a ‘#’ sign precedes the three figures. Each of the double-digit numbers defines the intensity of its respective “light-bulb”. The first double-digit number is for the pixel’s red light-bulb , the second number is for the green light-bulb, and the last one is for the blue light-bulb. We can also add double-digits number at the end, that will define the color’s opacity.

As you probably know, the hexadecimal base means that a digit’s value can be between 0 and 15, with the values of 10–15 represented by the letters A to F. In each of the double-digit numbers, the lowest number, 00, means that the bulb is shut off, and the highest number, FF, is the strongest light of this specific color. There are 256 intensity levels for each of these three colors. With those three light-bulbs that make up every pixel of color, we can create any color displayed on our screen. The two optional digits that define the color’s opacity are also a double-digit hexadecimal number. The highest value, FF, means full opacity, and the lowest value, 00, means total transparency. The numbers in between make the element semi-transparent, i.e., the color blends with the background color.

Here is an example of the red color(only the first light-bulb is on, the other bulbs are off):

.box{

background-color: #ff0000;

width: 100px;

height: 100px;

}

The RGB/RGBA colors method —this method is also based on each color being a combination of red, green, and blue. There are, however, two differences between this method and the hexadecimal one. First, this method uses decimal values as opposed to hexadecimal values in the previous way. Second, the syntax isn’t a string of numbers but a function — rgb() or rgba(). The functions accept a three-digit number between 0 and 255 for each of the red, green, and the blue “light-bulbs”. 0 means that the bulb is off, and 255 indicates that the light-bulb is with full brightness intensity. The rgba() function accepts a fourth parameter — the opacity. Its value is a decimal fraction, where 0 means full transparency, and 1 means full opacity, and the fractions in between are the element’s transparency percent.

Here is an example of the red color in RGB method:

.box{

background-color: rgb(255, 0, 0);

width: 100px;

height: 100px;

}

Working with the methods based on the color being a combination of red, green, and blue, raises a few challenges. The first is that this method isn’t intuitive — it isn’t how our minds perceive colors. When we look at a color, our brains don’t separate it into red, green, and blue. Therefore when writing the colors in such a way, we can’t easily recognize a color by its RGB number, whether hexadecimal or decimal.

Another potential challenge is maintenance. Web designers might sometimes want many shades of each color, for example, 30 types of blue, 20 types of orange, etc. When trying to maintain these many variations with CSS variables, we might end up with too many variables. What’s worse is that even though the colors might be different shades of the same color, their RGB representations aren’t connected in any way. Therefore if the web designer wants to change the blue scheme into a green scheme, it might require updating ten or more separate CSS variables.

The HSL/HSLA color method — HSL stands for hue, saturation, and lightness.

HSL works in the same way our brain perceives colors: a color that we can manipulate with lightness and saturation.

The Hue Property is a color picked from a palette of 360 colors. The colors are set in a circle, and each hue is a degree in the color-wheel. The chosen color is the base from which we’ll create other shades by adding saturation, lightness, or both.

The Saturation Property describes the color’s saturation. 0% means no color (the color will be grey), and a value of 100% will show the color in its most vibrant color. It’s best to use a value in the range of 10% — 100% since that will allow us to see the base color.

The Lightness Property describes the lighting intensity. The extreme values will eliminate the color: 0% will look black, and 100% will look white. Therefore we prefer to use numbers between 10% and 90% since that will allow us to see the base color.

The Alpha Channel Property (optional) — using HSLA instead of HSL allows us to control the color’s opacity. It’s best to use values in the range of 10% — 100% since that will enable us to see the base color (0% means transparent color).

The HSL method solves both problems we mentioned earlier. It corresponds with the way our mind perceives colors, and it also addresses the maintenance problem. Now web designers can be satisfied by choosing as little as 3–5 base colors and use them to create as many color variants as they like.

Now that we understand what an HSL color consists of, all we need is to structure it elegantly.

The web designer can choose between three and five base colors from the Hue palette, giving us 3 to 5 numbers, which are degrees on the hue palette’s color wheel.

These colors will be the basis on which the web designer can create many combinations with the lightness, saturation — and optionally the opacity — parameters.

The HSL method gives the web developer and the web designer a single place in which they control the website’s base colors. That’s where they can check and update the colors according to their needs.

Base Starting Points for the Saturation, Lightness and Opacity Parameters

As there are infinite color combinations that we can create from those base colors, I have created smart parameter values to start from:

  • Saturationbegin with the default of 50% — mid-range (has to be bigger than 0% value. Because 0% saturation value will make the color look grayish).
  • Lightnessstart with the default of 50% because it should be larger than 0% and smaller than 100% value; otherwise, the color will look either black or white.
  • Opacity — start with the default of 100%. If you are working with HSLA, you have a parameter for opacity, and full opacity is best. The 100% value means full opacity, while the 0% value will cause the color to be transparent.

To elegantly create color variations, we’ll first define each base color’s hue degree as a CSS variable. Example:

/**  common-colors  **/ 

:root{

/* base color 1 */

--base-color1: 60;

/* base color 2 */

--base-color2: 120;

/*base color 3*/

--base-color3: 200;

}

Then we can create other shades from each of those base colors. Here is an example of creating other shades of colors from base-color1.

In this example, we define a 50% value for saturation and change the lightness values to create the variations:

/** common-colors **/

:root{

/* base color 1 */

--base-color1: 60;

--color1-light: hsla(var(--base-color1), 50%, 75%, 100%);

--color1-normal: hsla(var(--base-color1), 50%, 50%, 100%);

--color1-darker: hsla(var(--base-color1), 50%, 35%, 100%);

}

Now, we’ll apply this method to the rest of the base colors:

/**common-colors**/ 

:root{

/* base color 1 */

--base-color1: 60;

--color1-light: hsla(var(--base-color1), 50%, 75%, 100%);

--color1-normal: hsla(var(--base-color1), 50%, 50%, 100%);

--color1-darker: hsla(var(--base-color1), 50%, 35%, 100%);

/* base color 2 */

--base-color2: 120;

--color2-light: hsla(var(--base-color2), 50%, 75%, 100%);

--color2-normal: hsla(var(--base-color2), 50%, 50%, 100%);

--color2-darker: hsla(var(--base-color2), 50%, 35%, 100%);

/*base color 3 */

--base-color3: 200;

--color3-light: hsla(var(--base-color3), 50%, 75%, 100%);

--color3-normal: hsla(var(--base-color3), 50%, 50%, 100%);

--color3-darker: hsla(var(--base-color3), 50%, 35%, 100%);

}

That’s it! We’ve created a smart color scheme with HSL/HSLA colors, structuring it with the same base colors. The advantage is that now we can easily update the base colors, affecting all of their depending colors accordingly.

HSL Colors Pallet Result

This power serves both web developers and web designers. They can both play with those base colors and see how the website changes all its colors with those minimal base colors.

Codepen Live Example

Making More Common Rules for the Params of the HSL/HSLA

If you are a web developer who wants to take things one step further, you can generate CSS variables for the rest of the parameters (saturation, lightness & opacity), to target the most commonly used values. For example:

:root{ 

/** commonly used saturation/lightness/opacity levels **/

--saturation-level1: 20%;

--saturation-level2: 50%; /* mid range - normal */

--saturation-level3: 80%;

--lightness-level1: 75%;

--lightness-level2: 50%; /* mid range - normal */

--lightness-level3: 35%;

--opacity-level1: 100%; /* no opacity - normal */

--opacity-level2: 80%;

--opacity-level3: 60%;

}

Now you can use various combinations of these parameters to create better synchronization between the other colors. Example:

--color1-light:  hsla( var(--base-color1),  

var(--saturation-level2),

var(--lightness-level1),

var(--opacity-level1) );

Full Example on CodePen

That’s all.

I hope you’ve enjoyed this article and learned from my experience in using a better method for working with colors on the web.

If you like this post, I would appreciate applause and sharing 🙂

You can follow me via Twitter.

More of my CSS posts:

The New Responsive Design Evolution

New CSS Logical Properties!

CSS Position Sticky — How It Really Works!

Who Am I?

I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture. I work at Investing.com.

You Can find me in my Facebook groups:

CSS Masters

CSS Masters Israel

making-a-better-custom-select-element

In my work as an accessibility consultant, there are some frequent problems I find on people’s websites. One that’s come up a lot recently is that people are making custom select inputs for their forms. I can tell that people are trying to make them accessible, because they’ve added ARIA attributes or visually-hidden instructions for screen reader users. Sometimes they use a plugin which claims to be accessible. And this is great, I love that folks want to do the right thing! But so far I’ve never come across a custom select input which actually meets all of the WCAG AA criteria.

Often I recommend to people that they use the native HTML select element instead. Yes, they’re super ugly, but as Scott Jehl shows us in his article Styling a Select Like It’s 2019 they are a lot easier to style than they used to be. They come with a lot of accessibility for free – they’re recognised and announced clearly by all screen reader software, they work reliably and predictably with keyboards and touch, and they look good in high contrast themes.

But sometimes, I can’t recommend the select input as a replacement. We want a way for someone to choose an item from a list of options, but it’s more complicated than just that. We want autocomplete options. We want to put images in there, not just text. The optgroup element is ugly, hard to style, and not announced by screen readers. The focus styles are low contrast. I had high hopes for the datalist element, but although it works well with screen readers, it’s no good for people with low vision who zoom or use high contrast themes.

A screenshot of a datalist element: The input area has been zoomed in but the dropdown text is not zoomed in.
Figure 1: a datalist zoomed in by 300%

Select inputs are limited in a lot of ways. They’re frustrating to work with when you have something which looks almost like what you want, but is too restricted to be useful. We know we can do better, so we make our own.

Let’s work out how to do that while keeping all the accessibility features of the original.

Semantic HTML

We’ll start with a solid, semantic HTML base. A select input is essentially a text input which restricts the possible answers, so let’s make a standard input.


Then we need to show everyone who can see that there are options available, so let’s add an image with an arrow, like the native element.



For this input, we’re going to use ARIA attributes to represent the information in the icon, so we’ll give it an empty alt attribute so screen readers don’t announce its filename.

Finally, we want a list of options. An unordered list element is a sensible choice here. It also lets screen reader software understand that these bits of text are related to each other as part of a group.

  • User
  • Author
  • Editor
  • Manager
  • Administrator

You can dynamically add or remove options from this list whenever you need to. And, unlike our element inside a