Dark Mode UX: Not just a trend. But what does it affect the user?

The real problem in life

Have you ever been at night, plowing social media? Or read important articles But the bright light from the phone screen or the computer instead stabbed the eyes until it must be narrowed Or feeling all my headache? Or sometimes have to hurry to close the screen Because it feels that the battery is about to run out too quickly?

These are not small things at all, especially in the age that we live with the screen almost all the time. From morning Whether it is work, learning, online shopping, or even recreation If the website or application that we use does not have options that are suitable for use in each situation It may easily make our experience worse.

Prompt for illustrations: A picture of a woman or a man sitting in front of the computer or phone in a dark room. With an expression of discomfort Or use hands to rub the eyes

Why did that problem occur?

These problems occur from many factors. Especially in terms of design, User Interface (UI) and User Experience (UX) that do not consider the various user environment.

Imagine: Most of the websites are designed with a bright color background (White Mode), which is suitable for use in an environment with enough light during the day. But when it was at night Or in a room with low light The color of the white light came out a lot. Became a big problem immediately. The main cause of these problems include:

• Excessive light difference: when the white background contrasts with the dark letters in the dark Our eyes must work harder to adjust the focus. Easily causes eyelash
• Blue Light Emission: The screen from electronic devices release the blue light. Which may affect sleep and eye health in the long run Especially when used for a long time in the dark
• The power of the screen: for the OLED or AMOLED screen (found in new smart phones). Black pixels use much less energy than white pixels. This means that using Dark Mode can actually save batteries.
• Impossible design Accessibility: Sometimes the designers do not consider users with eye problems. Or those who have to use the screen for a long time Resulting in no choice that helps reduce the burden on the eyes

Prompt for illustrations: Infographic images show the differences between the White Mode and Dark Mode with a circle showing the use of battery power of the OLED/AMOLED screen in each mode.

If left, how will it affect?

If we still let the use of websites or applications that do not have Dark Mode or do not have a flexible UX/UI design for users. It may affect many aspects, both with the users themselves and with your business.

• Impact on users:
  • Eye health problems: Tan, dry eyes, headache, and may negatively affect the eyes in the long run.
  • Unlimited sleep: Blue light received before bedtime may inhibit melatonin production. Makes it more difficult to sleep Or can't sleep well
  • Bad use experience: users feel inconvenient, frustrated, and may stop using that website or application.
• Affecting your business:
  • Conversion rate decreased: when the user feels uncomfortable Or frustrated from use Is likely to leave the website faster Refusing to click the order button, fill out the form, or do any activities What you want
  • Bookce Rate is higher: the entrance rate will be increased immediately. Because the user doesn't want to be on the website that makes it feel bad
  • Reduced brand loyalty: users will see that your brand does not pay attention to customer experience. Causing not to come back to use repeatedly
  • Disadvantaged race: while competitors may start using the Dark Mode or the design that focuses on users to apply. You will lose the competitive advantage.

Take a look at an article about UX/UI on Webflow, which makes customers click and buy more to understand how good experience affects the conversion. [Cite: 106]

Prompt for illustrations: Graph showing the reduced conversion rate and the increased bounce rate in parallel with the image of users with eye pain. Or showing a dissatisfied expression

Is there any solution? And where should it start?

These problems can be solved by using the Dark Mode UX. Dark Mode is not just a fashion trend of design. But is a solution that meets the problem of low lighting And also providing many other benefits. Starting should be considered as follows:

1. What is the Dark Mode UX understand?

• Dark Mode (dark mode): is the display of the user interface that uses dark tones as the main, such as black or dark gray background. And use the letters or other elements to be bright, opposite the Light Mode (bright mode) that uses white or light colors

2. Benefits of using Dark Mode

• More comfortable in low light: Helps to reduce the brightness of the screen. Causing the eyes to relax and reduce the eye Ideal for use at night or in a dark room.
• Battery energy saving: For devices with OLED or AMOLED screens, completely black display uses less energy than white. Resulting in longer extending the life of the battery
• Reduce the blue light: naturally, Dark Mode will reduce the blue amount released from the screen. Which may help to sleep better if used before going to bed
• Add beauty and modern: Dark Mode often gives premium feelings, modern, and different from general websites.
• Helping some groups of users: users with certain color blindness Or those who are allergic to bright light May be very useful from Dark Mode

3. Consider before using

• Bright reading: Dark Mode may not be suitable for reading in a very bright environment. Because it may brighten the letters on the dark background
• The impact on the image. Brand: Dark Mode may give a different feeling from your original brand image. If your brand emphasizes brightness Or brightness
• More complex design: Design for both Light Mode and Dark Mode to work well. Need to be more careful in choosing more colors and elements.

4. Where should it start?

• Target analysis: When will your user often use the website? Is there a special desire for vision?
• Determine Design System: Color Palette for both Light Mode and Dark Mode clearly. Determine the color intensity. For Text, Background, Icon, and Interactive Elements to have appropriate Contrast.
• Starting with important parts: may start using the Dark Mode to use with the Landing Page page or the product page with high conversion first to see the response.
• For users to choose: There should be options for users to switch between Light Mode and Dark Mode by themselves. Not forced to use one mode

Prompt for illustrations: Infographic image shows the advantages and considerations of Dark Mode with related icons.

Examples from the real thing that used to be successful

In order to clearly see that Dark Mode UX is not just about beauty But how is it a strategy that helps to upgrade users and benefit the business? Take a look at the example of many world -class platforms and applications that are successful in using Dark Mode:

• YouTube: It is one of the first platforms that seriously use Dark Mode. Allowing users to watch videos in the dark more comfortably. Reduce eye fatigue from staring for the screen for a long time Especially those who watch videos during the night This option also helps to increase the time that users use on the platform (Watch Time) significantly.
• Twitter (current x): Online social networks that people use all the time, having Dark Mode allows users to postpone the news continuously without feeling pain. Even if used in a dark room Or on the bed before going to bed The response from the user is very positive. Makes the user feel more attached to the application
• Apple (iOS and MacOS): Apple operating systems on both mobile and computers are using the Dark Mode all over the system. Helps to make the experience consistent. Regardless of the application open You can use the Dark Mode. This shows truly attention to the User Experience and affects the satisfaction of users as a whole.
• Google (Android and various applications): similar to Apple, Google pushed Dark Mode throughout the Android operating system and in the popular Google application, such as Gmail, Google Maps, Chrome. But also helps to save batteries in the Android devices that use the OLED screen effectively

These examples point out that Dark Mode is not just a supplementary feature. But is an important element that helps to upgrade the Web Accessibility And create a great experience for many users

Prompt for illustrations: Youtube, IOS/MacOS screen

If wanting to follow, what to do? (Can be used immediately)

For designers and website owners of Webflow who would like to use Dark Mode UX on your website. This is Checklist and the procedure that you can start to do immediately!

1. Plans Color Palette for Dark Mode

• Set Primary Colors: Choose the main color of the brand that will be used in the Dark Mode, which may be adjusted to be slightly bright to make it easy to read on the dark background.
• Secondary Colors and Accent Colors: Define colors and colors, focus on use for Call-to -ction (CTA), icon, or part that wants to attract attention
• Text Colors: Use white or light gray for the main text. And brighter colors for Headline or text that you want to emphasize
• Background Colors: No need to be completely black. Try using dark gray, gray, blue, or blue gray. To add dimension and depth
• Contrast Ratio: Make sure that the color of the letters and backgrounds have a suitable Contrast (at least 4.5: 1) to make it easier to read. Especially for those who have Nielsen Norman Group .

2. UI elements in Webflow

• Global Swatches: Use Global Swatches in the Webflow to determine the color set for Light Mode and Dark Mode. You can switch and manage the color a lot.
• Set the Interaction for TOGGLE Switch: Create a Toggle Switch between Light Mode and Dark Mode using the webflow interact. When the user clicks this button, change the Class's Class or SESC to change the color as you defined.
• Adjust Typography: Check the size and weight of the font in the Dark Mode whether it's still easy to read. Sometimes it may need to adjust the weight of the font to be slightly thicker in the Dark Mode in order to read more comfortably.
• ICONS and Illustrations: Icon and illustrations should be adapted to the color scheme of Dark Mode may turn white, light gray, or outline instead.
• Images: Consider whether your pictures are still good in Dark Mode or not. Some images may have dark overlay or slightly brightens so as not to stand out too.

3. Test and improve

• Test on real equipment: Don't forget to test websites on a variety of devices, including mobile phones, tablets, and computers. To ensure that Dark Mode shows good results on every screen and all light conditions
• Get feedback from users: give your user the opportunity to feedback about the Dark Mode you created. Information from real users is very valuable to complete the improvement.
• Check the Page Speed: Although Dark Mode will save the battery. But do not neglect the overall Page Speed ​​Optimization

Prompt for illustrations: Webflow Designer screen image showing Global Swatches and Interaction for Dark Mode Togle.

Questions that people tend to wonder And the answers that are cleared

To give you more confidence and understand the Dark Mode UX. Let's see the popular questions with clear answers:

Q1: Dark Mode is always better than Light Mode?

A: Not always! Dark Mode has a distinct advantage of use in low light, saving batteries for the OLED/AMOLED screen, and helps to reduce blue light. But in a very bright environment, such as daytime day, Light Mode may also give better reading experiences. Because the black letters on the white background are higher than the brighter place The best way is "Let users choose" which mode to use according to their preferences and environment.

Q2: Is the use of Dark Mode affecting SEO?

A: Directly, having a Dark Mode does not directly affect the SEO RANKING. Google does not rank the website as if there is a Dark Mode or not. Can use the website longer And reducing the out of the website (Bounce Rate). These are indirect factors that Google gives importance to (especially Helpful Content and Core Web Vitals ). Therefore, having a good Dark Mode can benefit SEO in the long run through UX improvements.

Q3: Should my website have Dark Mode?

A: Consider the target audience and the characteristics of your website.

• If your website focuses on content that must be read for a long time (such as blog, article, e-book)
• If your target audience tends to visit the website during the night
• If your website has a modern or premium image
• If you want to upgrade the Mobile Experience and save batteries for users.

If it is considered one of the points, adding a Dark Mode is worth it to consider. But if your website is just a short landing page that focuses on Conversion quickly. Dark Mode may not be the first necessary thing.

Q4: Dark Mode must always be completely black?

A: No need to be completely black ( #000000 )! In fact, most UX/UI designers recommend using dark gray in various shades. Instead of completely black The use of dark gray will help reduce the severe Contrast between the background and white letters. Make the eyes relax and read easier. For example, Google Material Design itself is recommended to use dark gray instead of completely black for Dark Theme.

Prompt for illustrations: Image icons, questions and answers Represents a doubt about Dark Mode UX.

Summary to be easy to understand + want to try to do

In short, Dark Mode UX is not just a chic feature. That makes your website look cool only, but it is "investment" in "user experience" that will benefit your business in the long run. We care about the small details, such as the Dark Mode options, shows that we are "understanding" and "care" our users. And when the user feels good about your website They tend to be with you longer, come back to use, and of course "Click and buy" or "do Conversion" that you want in the end!

So don't wait! Let's go back and see your website and consider whether it's time to "upgrade" UX/UI with Dark Mode to your website. "Do not truly fall out of trend" and "use the user's heart" Today's little change may create great results for your business tomorrow!

Prompt for illustrations: Hand images that are pressing on the Dark Mode on the website with a continuous increase in sales graph.

Interested in upgrading the UX/UI on your Webflow website, "Use the user" and "create a true conversion", right? Can consult the Vision x Brain experts! We are ready to help you design a beautiful website, easy to use and meet your business in every dimension! Or learn more about website design and development of our website first.

‍